Un “flash” de la couleur, en utilisant uniquement les transitions css

Je suis en train de donner aux utilisateurs un "flash" de couleur quand il y a un événement de clic. Je peux obtenir la couleur à apparaître dans un agréable mode à l'aide d'une transition, mais je veux de la couleur à disparaître après .5s, sans enlever le "active" de la classe. Une condition cependant, c'est que je ne peut pas utiliser les animations jQuery et cela doit être fait en CSS.

Ci-dessous est le css j'utilise actuellement. 

.active{
  background-color: yellow;
  -webkit-transition: background-color .5s linear;
  transition: background-color .5s linear;
}

J'ai essayé de spécifier une deuxième valeur, cependant, je ne pense pas que ce soit un balisage valide car il ne fonctionne pas.

.active{
  background-color: yellow;
  -webkit-transition: background-color .5s linear, background-color:transparent .5s linear;
  transition: background-color .5s linear, background-color:transparent .5s linear;
}

http://jsbin.com/itivum/1/edit

  • ajouter un nouveau transistion comme fade-out avec 5 secondes de retard
  • Pourquoi vous avez transition sur .active? Il suffit de l'ajouter à l'élément (#imADiv)
  • Je suis à l'aide de la classe parce que la transition sera appliquée à des éléments basés sur des événements de clic, et depuis il n'y a plus d'un élément que je vais appliquer ce que je suis en utilisant une classe.
InformationsquelleAutor zmanc | 2013-05-28
  1. 37

    Je pense que c'est ce que vous cherchez. L'échantillon n'est pas exact.

    JS:

    $("#go").click(function() {
    $("#box").removeClass("demo");
    setTimeout(function() {
        $("#box").addClass("demo");
    }, 1);
});

    CSS:

    .container {position: relative;}

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
}

@-webkit-keyframes demo {
    0% {
        background-color: Yellow;
        opacity:1;
    }
    22% {
        background-color: Yellow;
    }
    77% {
        background-color: Red;
    }
    100% {
        background-color: #777;
    }
}
    
.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="go">Go</button>
<div class="container">
    <div id="box"></div>
</div>

    J'espère que vous aurez la solution que vous recherchez dans cela.

    EDIT :

    J'ai édité votre JS Bin.

    Ce sera ce que vous êtes exactement à la recherche de

    http://jsbin.com/imonab/1/edit

    InformationsquelleAutor Rohith
  2. 12

    Je suis venu avec les options suivantes en fonction de mes besoins propres. Je voulais un flash de couleur pour confirmer une action de l'utilisateur. Le texte clignote une fois lorsque vous cliquez sur elle. Il utilise jquery pour définir la classe, mais pas pour l'animation.

    Html:

    <span style="background:lightgray" id="id">Click to flash</span>

    Js:

    $('#id').click(function() {
    $('#id').addClass('flash');
    setTimeout(function() {
          $('#id').removeClass('flash');
    }, 500);
});

    Css:

    .flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.3s;

    animation-name: flash-animation;
    animation-duration: 0.3s;
}

@-webkit-keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}

@keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}

    Voir http://jsfiddle.net/umz8t/3597/

    InformationsquelleAutor PointZeroTwo
  3. 1

    Vous pouvez essayer de jouer un peu avec un pseudoelement, enchaînement de deux transitions

    la première transition change juste la couleur (avec un effet rapide), tandis que la seconde juste de changer l'opacité de la pseudoelement (il disparaît) après un 0.1s retard. N'hésitez pas à ajuster ces valeurs que vous préférez 

    #imADiv{
  margin-top:50px;
  height:150px;
  width:150px;
  position:absolute;
}

#imADiv:before {
  position: absolute;
  z-index: -1;
  top: 0; left: 0; width: 100%; height:100%;
  content: "";
  -webkit-transition: background .1s linear 0s, opacity .01s linear .1s;
  transition: background .1s linear 0s, opacity .01s linear .1s;

}

#imADiv.active:before {
  background-color: yellow;
  opacity: 0;
}

    Exemple jsbin: http://jsbin.com/isihos/3/edit

    InformationsquelleAutor fcalderan
  4. 0

    Impressionné par Rohith réponse, voici mon propre JSFiddle démo (avec des fonctionnalités supplémentaires)

    La partie principale est le CSS (ou comme je préfère, SCSS):

    @-webkit-keyframes quickFlash {
  0% {
    background-color: yellow;
    opacity: 1;
  }
  100% {
    background-color: inherit;
  }
}

.quickFlash {
  //https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
  -webkit-animation-name: quickFlash;
  -webkit-animation-duration: 1900ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: quickFlash;
  -moz-animation-duration: 1900ms;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
}

    Et j'ai trouvé utile de pouvoir avoir la classe supprimer lui-même à la fin de l'animation (pour que je puisse les ajouter plus tard à nouveau si je voulais voir les animations de nouveau):

    function flashYellow(element) {
  element
    .addClass("quickFlash")
    .on(
      "webkitAnimationEnd oanimationend msAnimationEnd animationend",
      function() {
        console.log("animationend");
        $(this)
          .delay(500)//Wait for milliseconds.
          .queue(function() {            
            console.log("end of delay");
            $(this)
              .removeClass("quickFlash")
              .dequeue();
          });
      }
    );
}
    InformationsquelleAutor Ryan