Animation CSS3 avec gradients
est-il vraiment impossible d'animer un gradient-background avec CSS?
quelque chose comme:
@-webkit-keyframes pulse {
0% {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
}
50% {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
}
100% {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
}
}
je sais, pour Safari 5.1+ et Chrome 10+ Il y a une nouvelle syntaxe de gradient, mais pour l'instant, je dois m'en tenir à l'ancienne pour ce projet.
6 réponses
ne sont pas encore supportées sur les gradients webkit. C'est dans les specs, mais il ne fonctionne pas encore.
(p. S. si vous ne faites que des transitions de couleurs - vous pouvez vérifier-WebKit-filtres-qui animent!)
mise à Jour: gradient de transitions, apparemment, ne se de travail dans IE10+
Mettez chaque variation de gradient sur sa propre couche. Position absolue. Donnez à chacun sa propre série d'images clés synchronisées entre elles. Dans ces images clés définissent l'opacité pour chaque couche, à chaque image clé, avec 1 et 0 mélangé autour parmi les images clés.
méfiez-vous que la couleur du contenant va saigner à travers, donc envelopper les couches dans un parent avec un fond de blanc.
j'ai résolu le problème par application :avant l'attribution à l'étiquette A.
lien: http://codepen.io/azizarslan/pen/xsoje
CSS:
nav ul#menu li a {
display: block;
position: relative;
z-index: 1;
/* webkit gradient background */
background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));
}
nav ul#menu li a:before {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
/* webkit gradient background */
background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));
/* webkit transition */
-webkit-transition: all 250ms linear;
/* before hack */
content: ".";
text-indent: -99999px;
}
nav ul#menu li a:hover:before {
opacity: 1;
}
vous devriez vérifier CSS papier de verre-cela vous permet d'atteindre des gradients animés, mais ce n'est pas une solution CSS pure. CSS sandpaper s'occupe du rendu du gradient à travers le navigateur, et il y a un morceau de javascript qui gère l'animation.
http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie /
@Brian au lieu d'utiliser de nouveaux éléments html, utiliser sudo éléments :before et :after. Positionnez l'élément principal en tant que relatif, puis positionnez les pseudo-éléments en tant qu'absolu avec 0 pour le haut, la gauche, la droite et le bas.
HTML:
<div></div>
CSS:
div {
width: 200px;
height: 200px;
position: relative;
}
div::before, div::after {
display: block;
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Ajoutez vos images clés et les gradients au div et aux pseudo-éléments en utilisant l'opacité. Utilisez z-index pour contrôler qui est au-dessus de qui.
si vous recherchez une transition de votre texte d'une couleur unie à un gradient. Il suffit d'animer la couleur rgba du texte pour révéler le gradient de fond appliqué sur elle.
CSS:
.button {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
-webkit-background-clip: text;
color: rgba(255,255,255,1);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.button:hover {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
-webkit-background-clip: text;
color: rgba(255,255,255,0);
}