Transitions CSS3 souhaitez ajouter une couleur fade away

Je veux faire une DIV de fond (qui n'ont pas une couleur d'arrière-plan) clignote en rouge puis la facilité à vide à nouveau. maintenant, j'ai utilisé le JS pour ajouter une nouvelle CLASSE (ce qui ajoute de la rouge) à la DIV en question et CSS3 pour ajouter un assouplissement de la couleur d'arrière-plan. mais il la soulage, ce que je veux, c'est aller en ROUGE, puis la facilité. Je suppose que je pourrais le faire en utilisant JS pour ajouter plusieurs CLasss après un certain délai. mais peut CSS3 être utilisé pour ce faire entièrement?

OriginalL'auteur Purplemonkey | 2012-04-09

  1. 37

    Si vous voulez quelque chose comme une mise en lumière, vous souhaiterez peut-être utiliser les animations CSS3. Ils ne sont pas pris en charge dans les navigateurs plus anciens. Vérifier caniuse pour cela.

    J'ai créé un petit exemple ici.

    Le point culminant est appelé en cliquant sur le lien. Voici le CSS (sans vendeur-préfixes):

    @keyframes highlight {
  0% {
    background: red
  }
  100% {
    background: none;
  }
}

#highlight:target {
  animation: highlight 1s;
}
    merci pour l'exemple, mais je suis à la recherche pour ce faire de l'effet sans le clic de l'utilisateur. Au chargement de la page je suis à la recherche d'spécifique DOM entrées à l'ajout d'une classe. Lorsque cette classe est ajouté je le veux à clignoter en rouge et fondu en arrière pour rien?
    Génial! J'ai cloué. merci pour le pointeur à des animations, qui a été la clé. la seule étape que je n'était pas sur à partir de votre exemple a été le MOZ détails (pas sûr de la façon dont votre page d'exemple de travail). triés grâce maintenant.
    L'exemple fonctionne avec prefix-free: leaverou.github.com/prefixfree
    Est-il possible de faire de l'animation à répéter sur chaque clic?
    Je pense que vous pourriez le faire avec :focus.

    OriginalL'auteur drublic

  2. 2

    Une façon de le faire est d'utiliser l'INTERFACE utilisateur de jQuery animate méthode, qui s'étend à la "normale" jQuery animate() pour affecter des choses comme la couleur d'arrière-plan.

    Transitions comme cela est possible en css3, mais évidemment avec pas aussi large prise en charge du navigateur.

    #maDiv {
   -webkit-transition:background-color 0.5s linear;
   -moz-transition: background-color 0.5s linear;
   -o-transition: background-color 0.5s linear;
   height: 20px;
   width: 20px;
   background:#000;
}

#maDiv:hover {
    background: #ff0;
}

    Qui va s'estomper la couleur lorsque l'utilisateur place le pointeur de la Div, et fondu en arrière quand la souris est hors de question, plus de 0,5 secondes. Pour la prise en charge du navigateur de détails, voir "css3 transition" ici: http://www.html5rocks.com/en/features/presentation

    OriginalL'auteur Daniel Hallqvist