CSS3 animation avec des dégradés

Il n'y a vraiment aucun moyen pour animer un dégradé d'arrière-plan avec le 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 google Chrome 10+ il y a un nouveau gradient de la syntaxe, mais pour l'instant, je dois continuer à l'ancienne pour ce projet.

  • vous ne pouvez pas modifier le css ou quoi?
  • ? ... rien ne se passe si je lance cette animation sur un élément ( -webkit-animation: pulse 1s infini; )
  • Je pense qu'il ne fonctionne pas avec des dégradés, même avec la nouvelle syntaxe
  • J'ai juste appris à la dure! les transitions sur un dégradé linéaire ne fonctionnent pas encore
  • les transitions n'est pas, mais se transforme, de sorte que vous pouvez translation/rotation/inclinaison autour d'au moins ie codepen.io/philipphilip/stylo/OvXEaV
InformationsquelleAutor albuvee | 2011-04-13
  1. 26

    Les Transitions ne sont pas encore pris en charge sur webkit dégradés. C'est dans les specs, mais il ne fonctionne pas encore.

    (p.s. si vous êtes en train de faire des transitions de couleur uniquement, vous voudrez peut-être vérifier -webkit-filtres - qui ne animer!)

    Mise à jour: gradient de transitions, apparemment, ne se de travail dans IE10+

    • C'est dans les specs pour le nouvelles syntaxe, pas de propriété -webkit-gradient() de la merde.
    • Autant que je sache, il n'y a pas de support pour le gradient de transitions partout, même celles qui prennent en charge la nouvelle syntaxe.
    • BTW, si vous êtes prêt à aller SVG - puis dégradé, les transitions sont juste dandy - aussi longtemps que vous êtes sur un navigateur récent. Voir srufaculty.sru.edu/david.dailey/svg/Stwelve.svg
    InformationsquelleAutor Michael Mullany
  2. 9

    Mettre chaque gradient de variation sur son propre calque. Position absolue eux. Donner à chacun son propre ensemble d'images clés synchronisés les uns avec les autres. Dans ces images de définir l'opacité de chaque calque, à chaque image-clé, avec des 1 et des 0 mixte, autour de entre les images clés.

    Méfiez-vous que le conteneur des couleurs va saigner à travers, pour envelopper les couches d'un parent avec un arrière-plan blanc.

    http://jsfiddle.net/jSsZn/

    • C'est en effet très intelligent — mais vous avez besoin d'éléments supplémentaires seulement pour le style (pour moi un no-go) et dans la plupart des cas, ce n'est pas possible parce que vous relais sur le dégradé d'arrière-plan d'un élément par sa propre. mais merci pour cette solution créative à droite maintenant, cela semble être l'une des seules façons d'animer au moins de "faux" -animer — un dégradé.
    • Vraiment astucieux solution ici.
    InformationsquelleAutor Brian Ephraim
  3. 6

    J'ai résolu le problème par le biais de applicating :avant l'attribution à l'une balise.

    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;
}
    • Grand contourner. Je l'ai eu à travailler dans IE 10 & 11 trop. C'est assez bon secours (pas de transition en douceur mais hover fonctionne tout de même) sur IE 9 mais les versions antérieures peuvent exiger une compatibilité de secours si IE 8 ou déclaration antérieure.
    InformationsquelleAutor azizarslan
  4. 1

    Vous devriez vérifier css du papier de verre, ce qui vous permet de réaliser d'animation des dégradés, mais ce n'est pas un pur css solution. Css papier de verre prend soin de croix-navigateur rendu du dégradé, et il y a un bout de javascript qui s'occupe de l'animation.

    http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

    InformationsquelleAutor Shawson
  5. 0

    @Brian au lieu d'utiliser de nouveaux éléments html, utiliser sudo éléments :before et :after. Position de l'élément principal en tant que parent, puis positionner les éléments pseudo absolue à 0 pour le haut, à gauche, à droite et en 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;
}

    Ajouter des images clés et des gradients de la div et la pseudo-éléments à l'aide de l'opacité. L'utilisation de z-index de contrôle qui est sur le dessus de ce qui.

    InformationsquelleAutor mindfullsilence
  6. 0

    si vous êtes à la recherche pour un passage de votre texte à partir d'une couleur unie, un dégradé. Juste animer la rgba couleur du texte pour révéler le fond dégradé 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);
}
    InformationsquelleAutor Angelo Wellens