Utiliser des transitions CSS3 avec des arrière-plans dégradés

215

J'essaie de faire une transition en survol avec css sur une vignette de sorte qu'en vol stationnaire, le dégradé d'arrière-plan se fane. La transition ne fonctionne pas, mais si je la change simplement en rgba()valeur, cela fonctionne très bien. Les dégradés ne sont-ils pas pris en charge? J'ai aussi essayé d'utiliser une image, cela ne fera pas non plus la transition de l'image.

Je sais que c'est possible, comme dans un autre post quelqu'un l'a fait, mais je ne sais pas exactement comment. Toute aide> Voici quelques CSS pour travailler avec:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
css  gradient  css-transitions 
— alt
source
5
IE10 prend désormais en charge les transitions de dégradé - ce fut une heureuse surprise!
— sirmdawg
@mkprogramming, woha, c'est vraiment le cas et a fière allure! Voici une démo (fonctionne avec IE10 +). J'espère que d'autres navigateurs seront également pris en charge pour ce truc cool.
— Qtax
Ce site avait la meilleure solution, a fonctionné pour moi: nimbupani.com/some-css-transition-hacks.html
— Tom Hagen

Réponses:

173

Les dégradés ne prennent pas encore en charge les transitions (bien que la spécification actuelle indique qu'ils devraient prendre en charge le même dégradé pour aimer les transitions de dégradé par interpolation.).

Si vous voulez un effet de fondu avec un dégradé d'arrière-plan, vous devez définir une opacité sur un élément de conteneur et «transition» l'opacité.

(Il y a eu quelques versions de navigateur qui prenaient en charge les transitions sur les dégradés (par exemple IE10. J'ai testé les transitions de dégradé en 2016 dans IE et elles semblaient fonctionner à l'époque, mais mon code de test ne fonctionne plus.)

Mise à jour: octobre 2018 Les transitions de dégradé avec une nouvelle syntaxe non préfixée [par exemple, gradient radial (...)] sont désormais confirmées pour fonctionner (encore?) Sur Microsoft Edge 17.17134. Je ne sais pas quand cela a été ajouté. Ne fonctionne toujours pas sur les derniers Firefox et Chrome / Windows 10.

— Michael Mullany
source
1
De plus, les spécifications de gradient ne sont pas encore terminées et le développement actuel des spécifications de gradient est déjà loin de l'implémentation actuelle de gradient de web.
— c-smile
1
Mais les navigateurs Webkit Edge prennent désormais en charge la nouvelle spécification de gradient Mozilla-Heritage ainsi que l'ancienne syntaxe Webkit. Confusément, ils sont tous deux préfixés -webkit
— Michael Mullany
3
Que IE10 prend entièrement en charge les transitions de gradient.
— Niet the Dark Absol
2
— Dave Lunny
2
Pouvez-vous ajouter une démonstration sur l'utilisation des transitions avec des dégradés maintenant? Je n'arrive pas à le comprendre sur la base de votre réponse (et je ne trouve aucune autre nouvelle à ce sujet). La dernière fois que j'ai entendu, vous ne pouvez pas faire la transition entre deux images d'arrière-plan, ce qui étaient les dégradés.
— Mackenzie McClane
98

Une solution de contournement consiste à modifier la position d'arrière-plan pour donner l'effet que le dégradé change: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Transition de dégradé CSS3 avec position d'arrière-plan

Bien que vous ne puissiez pas animer directement des dégradés à l'aide de la propriété de transition CSS, il est possible d'animer la propriété background-position pour obtenir une animation de dégradé simple:

Le code est simple:

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  
<div id="DemoGradient"></div>
Développer l'extrait

— Alan
source
31

Une solution consiste à utiliser background-position pour imiter la transition de gradient. Cette solution a été utilisée dans Twitter Bootstrap il y a quelques mois.

Mettre à jour

http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614

Voici un petit exemple:

État du lien

 .btn {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 40px;
  background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
  background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
  background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 90px;
  background-position: 0 -30px;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

État de vol stationnaire

.btn:hover {
   background-position: 0 0;
}
— vinzcelavi
source
1
Votre réponse était appropriée avant de la modifier. Ce n'est désormais plus une réponse, mais simplement un lien vers votre site Web. Je reviens à votre réponse sur l'original.
— Andrew Barber
Ok pas de problème. Il suffit de faire des changements mineurs.
— vinzcelavi
2
Et voici un violon pour cela: jsfiddle.net/Volker_E/RksTV La clé est la propriété background-size, que vous ne pouvez pas dans IE8. caniuse.com/#search=background-size En dehors de cela, c'est une bonne solution.
— Volker E.
11

Pour ce que ça vaut, voici un mixin Sass:

Usage:

@include gradientAnimation(red, blue, .6s);

Mixin:

@mixin gradientAnimation( $start, $end, $transTime ){
    background-size: 100%;
    background-image: linear-gradient($start, $end);
    position: relative;
    z-index: 100;
    &:before {
        background-image: linear-gradient($end, $start);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        width: 100%;
        z-index: -100;
        transition: opacity $transTime;
    }
    &:hover {
        &:before {
            opacity: 1;
        }
    }
}

Tiré de ce post génial sur Medium de Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

— Ricardo Zea
source
1
Le post sur Medium est très utile, merci de l'avoir ajouté
— Gendrith
9

Je sais que c'est une vieille question mais mabye quelqu'un aime ma façon de solution en CSS pur. Fondu dégradé de gauche à droite.

.contener{
  background-image:url('http://www.imgbase.info/images/safe-wallpapers/digital_art/3d_landscape/9655_3d_landscape.jpg');   width:300px;
  height:200px;
  background-size:cover;
  border:solid 2px black;
}
.ed {
    width: 0px;
    height: 200px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:0;
    transition:width 20s, opacity 0.6s;
}

.contener:hover .ed{
    width: 300px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:1;
    transition:width 0.4s, opacity 1.1s;
    transition-delay: width 2s;
    
    animation-name: gradient-fade;
    animation-duration: 1.1s;   
    -webkit-animation-name: gradient-fade; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.1s; /* Chrome, Safari, Opera */
}




/* ANIMATION */
@-webkit-keyframes gradient-fade {
    0%   {background:linear-gradient(to right, rgba(0,0,255,0), rgba(255,0,0,0));}
    2%  {background:linear-gradient(to right, rgba(0,0,255,0.01875), rgba(255,0,0,0));}
    4%  {background:linear-gradient(to right, rgba(0,0,255,0.0375), rgba(255,0,0,0.0));}
    6%  {background:linear-gradient(to right, rgba(0,0,255,0.05625), rgba(255,0,0,0.0));}
    8% {background:linear-gradient(to right, rgba(0,0,255,0.075), rgba(255,0,0,0));}
    10%  {background:linear-gradient(to right, rgba(0,0,255,0.09375), rgba(255,0,0,0));}
    12%   {background:linear-gradient(to right, rgba(0,0,255,0.1125), rgba(255,0,0,0));}
    14%  {background:linear-gradient(to right, rgba(0,0,255,0.13125), rgba(255,0,0,0));}
    16%  {background:linear-gradient(to right, rgba(0,0,255,0.15), rgba(255,0,0,0));}
    18%  {background:linear-gradient(to right, rgba(0,0,255,0.16875), rgba(255,0,0,0));}
    20% {background:linear-gradient(to right, rgba(0,0,255,0.1875), rgba(255,0,0,0));}
    22%  {background:linear-gradient(to right, rgba(0,0,255,0.20625), rgba(255,0,0,0.01875));}
    24%   {background:linear-gradient(to right, rgba(0,0,255,0.225), rgba(255,0,0,0.0375));}
    26%  {background:linear-gradient(to right, rgba(0,0,255,0.24375), rgba(255,0,0,0.05625));}
    28%  {background:linear-gradient(to right, rgba(0,0,255,0.2625), rgba(255,0,0,0.075));}
    30%  {background:linear-gradient(to right, rgba(0,0,255,0.28125), rgba(255,0,0,0.09375));}
    32% {background:linear-gradient(to right, rgba(0,0,255,0.3), rgba(255,0,0,0.1125));}
    34%  {background:linear-gradient(to right, rgba(0,0,255,0.31875), rgba(255,0,0,0.13125));}
    36%   {background:linear-gradient(to right, rgba(0,0,255,0.3375), rgba(255,0,0,0.15));}
    38%  {background:linear-gradient(to right, rgba(0,0,255,0.35625), rgba(255,0,0,0.16875));}
    40%  {background:linear-gradient(to right, rgba(0,0,255,0.375), rgba(255,0,0,0.1875));}
    42%  {background:linear-gradient(to right, rgba(0,0,255,0.39375), rgba(255,0,0,0.20625));}
    44% {background:linear-gradient(to right, rgba(0,0,255,0.4125), rgba(255,0,0,0.225));}
    46%  {background:linear-gradient(to right, rgba(0,0,255,0.43125),rgba(255,0,0,0.24375));}
    48%   {background:linear-gradient(to right, rgba(0,0,255,0.45), rgba(255,0,0,0.2625));}
    50%  {background:linear-gradient(to right, rgba(0,0,255,0.46875), rgba(255,0,0,0.28125));}
    52%  {background:linear-gradient(to right, rgba(0,0,255,0.4875), rgba(255,0,0,0.3));}
    54%   {background:linear-gradient(to right, rgba(0,0,255,0.50625), rgba(255,0,0,0.31875));}
    56%  {background:linear-gradient(to right, rgba(0,0,255,0.525), rgba(255,0,0,0.3375));}
    58%  {background:linear-gradient(to right, rgba(0,0,255,0.54375), rgba(255,0,0,0.35625));}
    60%  {background:linear-gradient(to right, rgba(0,0,255,0.5625), rgba(255,0,0,0.375));}
    62% {background:linear-gradient(to right, rgba(0,0,255,0.58125), rgba(255,0,0,0.39375));}
    64%  {background:linear-gradient(to right,rgba(0,0,255,0.6), rgba(255,0,0,0.4125));}
    66%   {background:linear-gradient(to right, rgba(0,0,255,0.61875), rgba(255,0,0,0.43125));}
    68%  {background:linear-gradient(to right, rgba(0,0,255,0.6375), rgba(255,0,0,0.45));}
    70%  {background:linear-gradient(to right, rgba(0,0,255,0.65625), rgba(255,0,0,0.46875));}
    72%  {background:linear-gradient(to right, rgba(0,0,255,0.675), rgba(255,0,0,0.4875));}
    74% {background:linear-gradient(to right, rgba(0,0,255,0.69375), rgba(255,0,0,0.50625));}
    76%  {background:linear-gradient(to right, rgba(0,0,255,0.7125), rgba(255,0,0,0.525));}
    78%   {background:linear-gradient(to right, rgba(0,0,255,0.73125),,rgba(255,0,0,0.54375));}
    80%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.5625));}
    82%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.58125));}
    84%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.6));}
    86% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.61875));}
    88%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.6375));}
    90%   {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.65625));}
    92%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.675));}
    94%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.69375));}
    96%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.7125));}
    98% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.73125),);}
    100%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));}
}
<div class="contener" style="">
  <div class="ed"></div>
</div>
Développer l'extrait

— Skylin R
source
3

Dans ce qui suit, une balise d'ancrage a un enfant et un petit-enfant. Le petit-enfant a le dégradé de fond lointain. L'enfant dans le fond proche est transparent, mais a le dégradé de transition vers. En vol stationnaire, l'opacité de l'enfant passe de 0 à 1, sur une période de 1 seconde.

Voici le CSS:

.bkgrndfar {
  position:absolute;
  top:0;
  left:0;
  z-index:-2;
  height:100%;
  width:100%;
  background:linear-gradient(#eee, #aaa);
}

.bkgrndnear {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
  opacity:0;
  transition: opacity 1s;
}

a.menulnk {
  position:relative;
  text-decoration:none;
  color:#333;
  padding: 0 20px;
  text-align:center;
  line-height:27px;
  float:left;
}

a.menulnk:hover {
  color:#eee;
  text-decoration:underline;
}

/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
  opacity:1;
}

Et voici le HTML:

<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
  <div class="bkgrndnear">
  </div>
</div>
</a>

Ce qui précède n'est testé que dans la dernière version de Chrome. Voici les images avant le vol stationnaire, à mi-chemin en vol stationnaire et en transition complète en vol stationnaire:

Avant A mi-chemin Après

— PaulQ
source
3

Une solution de contournement partielle pour la transition de dégradé consiste à utiliser l'ombre de la boîte d'encart - vous pouvez faire la transition soit l'ombre de boîte elle-même, soit la couleur d'arrière-plan - par exemple, si vous créez une ombre de boîte d'encart de la même couleur que l'arrière-plan et que vous utilisez la transition sur la couleur d'arrière-plan, cela crée l'illusion ce fond uni se transforme en dégradé radial

.button SPAN {
    padding: 10px 30px; 
    border: 1px solid ##009CC5;

    -moz-box-shadow: inset 0 0 20px 1px #00a7d1;
    -webkit-box-shadow: inset 0 0 20px 1px#00a7d1;
    box-shadow: inset 0 0 20px 1px #00a7d1; 

    background-color: #00a7d1;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.button SPAN:hover {
    background-color: #00c5f7; 
}
— Frantisek Were Bouska
source
1
solution intelligente, l'ombre incrustée peut créer parfaitement l'illusion de dégradé
— Aziz
2

Trouvé un joli hack sur codepen qui modifie la opacitypropriété mais réalise ce fondu d'un gradient à un autre en tirant parti des pseudo-éléments. Ce qu'il fait, c'est qu'il définit une :aftersorte que lorsque vous modifiez l'opacité de l'élément réel, l' :afterélément s'affiche de sorte qu'il ressemble à un fondu. J'ai pensé qu'il serait utile de partager.

Codepen d'origine: http://codepen.io/sashtown/pen/DfdHh

.button {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
.button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #ca5f5e, #d68584);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
.button:hover:after {
  opacity: 1;
}
.button span {
  position: relative;
  z-index: 3;
}
body {
  text-align: center;
  background: #ddd;
}
<a class="button" href="#"><span>BUTTON</span></a>
Développer l'extrait

— août
source
2

Sur la base du code CSS dans votre question, j'ai essayé le code comme suit et cela fonctionne pour moi (exécutez l'extrait de code), et veuillez essayer par vous-même:

#container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
     
#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
    
#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}
<div id="container"><div><a href="#"><span>Press Me</span></a></div></div>
Développer l'extrait

Sur la base du code CSS dans votre question, j'ai essayé le code comme suit et cela fonctionne pour moi, et essayez par vous-même:

    #container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}

#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}

Ça marche pour vous? Changez la couleur en fonction de vos besoins :)

— Raymond
source
1

Essayez d'utiliser: avant et: après (ie9 +)

#wrapper{
    width:400px;
    height:400px;
    margin:0 auto;
    border: 1px #000 solid;
    position:relative;}
#wrapper:after,
#wrapper:before{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:'';
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    opacity:1;
    z-index:-1;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
#wrapper:after{
    opacity:0;
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
#wrapper:hover:before{opacity:0;}
#wrapper:hover:after{opacity:1;}
— Anon
source
1

Comme indiqué. Les dégradés ne sont actuellement pas pris en charge avec les transitions CSS. Mais vous pouvez contourner ce problème dans certains cas en définissant l'une des couleurs sur transparent, afin que la couleur d'arrière-plan d'un autre élément d'habillage transparaisse, et la transition à la place.

— Jens
source
1

J'utilise cela au travail :) IE6 + https://gist.github.com/GrzegorzPerko/7183390

N'oubliez pas <element class="ahover"><span>Text</span></a>si vous utilisez un élément de texte.

.ahover {
    display: block;
    /** text-indent: -999em; ** if u use only only img **/
    position: relative;
}
.ahover:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
}
.ahover:hover:after {
    opacity: 1;
}
.ahover span {
    display: block;
    position: relative;
    z-index: 2;
}
— Davton
source
0

Je ne peux pas faire de mal à publier une autre vue car il n'y a toujours pas de moyen officiel de le faire. A écrit un plugin jQuery léger avec lequel vous pouvez définir un dégradé radial d'arrière-plan et une vitesse de transition. Cette utilisation de base le laissera ensuite apparaître, optimisé avec requestAnimationFrame (très fluide):

$('#element').gradientFade({

    duration: 2000,
    from: '(20,20,20,1)',
    to: '(120,120,120,0)'
});

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

Conserve l'arrière-plan d'origine et toutes les propriétés intactes. A également le suivi des hautes lumières comme paramètre:

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

— Shikkediel
source
0

Je voulais qu'un div apparaisse comme une sphère 3D et une transition à travers les couleurs. J'ai découvert que les couleurs d'arrière-plan dégradées ne font pas (encore) de transition. J'ai placé un arrière-plan dégradé radial devant l'élément (en utilisant l'indice z) avec un arrière-plan solide en transition.

/* overlay */
z-index : 1;
background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );

puis le div.balldessous:

transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

puis changé la couleur de fond du div.ballet le tour est joué!

https://codepen.io/keldon/pen/dzPxZP

— rushkeldon
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.