CSS3 Transition: анимация между 2 различными градиентами. в том числе jsfiddle - PullRequest
2 голосов
/ 07 июля 2011

http://jsfiddle.net/nicktheandroid/PXdXr/1/

Я бы хотел анимировать между двумя разными градиентами, чтобы один из них был при наведении курсора. Мой пример показывает, что должно произойти, но это происходит мгновенно, я хочу, чтобы это исчезло между ними.

Просто для справки здесь, на SO (это все в jsfiddle):

.outerBorder {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/

   background: #4d4d4d; /* Old browsers */
background: -moz-linear-gradient(top, #4d4d4d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* W3C */



-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;

}

.outerBorder:hover {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/

background: #d6f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6f9ff), color-stop(100%,#9ee8fa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* W3C */

}

.innerBox {
    width:300px;
    height:200px;
    margin:5px;
    background-color:#fff;
}

Ответы [ 2 ]

4 голосов
/ 08 июля 2011

Как упоминал Рик, пока нет поддержки градиентной анимации.

Однако вы все равно можете применить полупрозрачный градиент поверх CSS-перехода и затем просто анимировать цвет фона(эффект будет очень похож):

.outerBorder {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/  
    -webkit-transition: background-color 1000ms ease-in-out;
    -moz-transition: background-color 1000ms ease-in-out;
    -o-transition: background-color 1000ms ease-in-out;
    transition: background-color 1000ms ease-in-out;
    background-color: #4d4d4d;
}

.outerBorder:hover {
    background-color: #b4d7dd; 
}

.innerBox {
    width:300px;
    height:200px;
    padding:15px;
    background-color:#fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255, 0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
   background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

JSFiddle: http://jsfiddle.net/NAVYX/

1 голос
/ 08 июля 2011

Градиентная анимация пока не поддерживается. Поскольку вы используете jQuery, вы можете написать эту функцию, используя cssHooks , или проще, иметь один градиент поверх другого, а затем анимировать прозрачность для имитации затухания.

...