Цвет анимации CSS3 с градиентом

Я использую анимацию CSS3 для превращения одного бутстрапового аккордеона из одного цвета ни в какое другое, но проблема в том, что я вижу, что с анимацией невозможно сделать этот переход с градиентом, и аккордеон кажется слишком много 2D тоже меня. Я читал, что люди делают некоторые трюки, например, ставят один элемент один над другим и используют непрозрачность, но в любом случае не так просто установить другой элемент в той же позиции, поскольку он создается динамически.Цвет анимации CSS3 с градиентом

Можете ли вы дать мне какое-либо предложение, пожалуйста?

Вот что я пытаюсь сделать без успеха до сих пор:

.panel-warning > .panel-heading { 
    background: linear-gradient(to bottom, #FCFCFC 0%, #FFF4C4 30%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    opacity: 0; 
} 

.panel-warning > .panel-heading { 
    -webkit-animation-direction: alternate; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: alert-warning; 
    -webkit-animation-timing-function: ease; 
    -moz-animation-direction: alternate; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-name: alert-warning; 
    -moz-animation-timing-function: ease; 
    opacity: 0.5; 
}

источник

2015-05-03 paul

Вы можете разместить демонстрационную версию jsfiddle? –

Извините, но очень сложно, так как HTML создается JSP динамически. – paul

Минимальный пример, показывающий проблему и предполагаемый результат, поможет нам понять ваши требования. – vals

Хотя я согласен с другими, что не ясно, что именно вы хотите достичь, вот некоторые демо-код для простой анимации градиентов:

.two:link, .two:visited { 
    background: #2876b2; 
    background: -webkit-linear-gradient(#2876b2, #549ad0); 
    background: -moz-linear-gradient(#2876b2, #549ad0); 
    background: -o-linear-gradient(#2876b2, #549ad0); 
    background: linear-gradient(#2876b2, #549ad0); 
    background-repeat: repeat; 
    -webkit-background-size: 100% 200%; 
    -moz-background-size: 100% 200%; 
    background-size: 100% 200%; 
    -webkit-transition: all .5s linear; 
    -moz-transition: all .5s linear; 
    -o-transition: all .5s linear; 
    transition: all .5s linear; 
} 

.two:hover, .two:focus, .two:active { 
    background-position: 0 -102%; 
}

Это относится к кнопке и берется за here.

Если вы после чего-то намного сложнее, вам, вероятно, понадобится какой-то сложный JavaScript-хакер.

источник

2015-05-03 21:37:56 herrbischoff

Здесь вы просто перемещаете градиент. То, что я делаю, - это цикл для перемещения анимации из одного цвета в другой. Я видел эту демо вчера. Спасибо anywau – paul

Я думаю, что вы хотите CSS3 градиент анимации, так что если вы используете поиск на этом сайте, вы можете найти этот вопрос, который содержит возможное решение вашего вопроса:

css3-animation-with-gradients

мое любимое решение является Brian's http://jsfiddle.net/jSsZn/ CSS3

источник

2015-05-03 22:00:28 motou

Я думаю, что использовать эту технику в моем случае было бы сложно, но спасибо! – paul

Цвет анимации CSS3 с градиентом

ответ

Смежные вопросы