Simple CSS Animation en Boucle à la Décoloration En & Out “Chargement” Texte

Sans Javascript, je voudrais faire une simple boucle CSS animation de classe qui s'estompe texte dans et hors de l'infini. Je ne sais pas beaucoup sur les animations CSS, donc je n'ai pas pensé à elle encore, mais ici, c'est la distance que j'ai obtenu:

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

J'ai mis ton code dans jsfiddle et il ressemble de travail. jsfiddle.net/ricardonunez/n4nfR
Pas pour moi sur Chrome. Est-il de la croix-problème de navigateur?
vous n'avez pas le soi-disant navigateur préfixe spécifique, pour Chrome, vous devez utiliser -webkit-animation et @-webkit-keyframes.
Oui. Il vous manque le navigateur préfixe. Vérifier touko réponse.

InformationsquelleAutor ac360 | 2014-06-01

Comme le Roi le Roi a dit, vous devez ajouter le navigateur préfixe spécifique. Cela devrait couvrir la plupart des navigateurs:

CSS:

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

HTML:

<div class="animate-flicker">Loading...</div>

Est-ce mieux qu'à l'aide de jQuery.fadeToggle() sur un intervalle?
Oh, tout à fait: il n'a besoin ni de jQuery ni Javascript à tous.
Cela fonctionne pour moi! +1

InformationsquelleAutor touko

45

bien la recherche d'une simple variation, j'ai trouvé ceci:

c'est vraiment intelligente, et je suppose que vous voudrez peut-être ajouter d'autres navigateurs variations trop bien que cela a fonctionné pour moi sur Chrome et Firefox.

de démonstration et de crédit => http://codepen.io/Ahrengot/pen/bKdLC

CSS:
```
@keyframes fadeIn { 
  from { opacity: 0; } 
}

.animate-flicker {
    animation: fadeIn 1s infinite alternate;
}
```
HTML:
```
<h2 class="animate-flicker">Jump in the hole!</h2>
```
- le plus simple est mieux
- Solution sympa, et le manque de contexte autour de pourquoi vous avez choisi l'expression "sauter dans le trou" est fascinante...
- Belle solution, merci beaucoup
- Belle solution! Si elle se comporte de façon un petit peu différente. Je veux dire que le clignotant a différents délais.
InformationsquelleAutor azerafati

De faire plus d'un élément d'ouverture/fermeture en fondu de manière séquentielle comme les 5 éléments fondu chaque 4s,

1 - faire unique de l'animation pour chaque élément avec animation-duration égale à [ 4s (la durée de chaque élément) * 5 (nombre d'éléments) ] = 20s

animation-name: anim1 , anim2, anim3 ... 
animation-duration : 20s, 20s, 20s ...

2 - image-clé d'animation pour chaque élément.

100% (keyframes percentage) / 5 (elements) = 20% (frame for each element)

3 - définir le début et la fin de chaque animation:

chaque animation a 20% de longueur de trame et @keyframes pourcentage démarre toujours à partir de 0%,
alors d'abord, l'animation va commencer à partir de 0% et de fin dans son cadre(20%),
et de chaque côté de l'animation démarre à partir de la précédente animation du point de fin et la fin quand il rejoindre sa monture (+20% ),

@keyframes animation1 { 0% {}, 20% {}}
@keyframes animation2 { 20% {}, 40% {}}
@keyframes animation3 { 40% {}, 60% {}}
and so on

maintenant nous avons besoin pour faire de chaque animation de fondu de 0 à 1 de l'opacité et de fade out de 1 à 0,

nous allons donc ajouter un autre 2 points (étapes) pour chaque animation après le début et avant la fin le point de prendre en charge la totalité de l'opacité(1)

Simple CSS Animation en Boucle à la Décoloration En & Out “Chargement” Texte

http://codepen.io/El-Oz/pen/WwPPZQ

.slide1 {
animation: fadeInOut1 24s ease reverse forwards infinite
}
.slide2 {
animation: fadeInOut2 24s ease reverse forwards infinite
}
.slide3 {
animation: fadeInOut3 24s ease reverse forwards infinite
}
.slide4 {
animation: fadeInOut4 24s ease reverse forwards infinite
}
.slide5 {
animation: fadeInOut5 24s ease reverse forwards infinite
}
.slide6 {
animation: fadeInOut6 24s ease reverse forwards infinite
}
@keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
14% {opacity: 1 }
16% { opacity: 0 }
}
@keyframes fadeInOut2 {
0% { opacity: 0 }
14% {opacity: 0 }
16% { opacity: 1 }
30% { opacity: 1 }
33% { opacity: 0 }
}
@keyframes fadeInOut3 {
0% { opacity: 0 }
30% {opacity: 0 }
33% {opacity: 1 }
46% { opacity: 1 }
48% { opacity: 0 }
}
@keyframes fadeInOut4 {
0% { opacity: 0 }
46% { opacity: 0 }
48% { opacity: 1 }
64% { opacity: 1 }
65% { opacity: 0 }
}
@keyframes fadeInOut5 {
0% { opacity: 0 }
64% { opacity: 0 }
66% { opacity: 1 }
80% { opacity: 1 }
83% { opacity: 0 }
}
@keyframes fadeInOut6 {
80% { opacity: 0 }
83% { opacity: 1 }
99% { opacity: 1 }
100% { opacity: 0 }
}

Bonne explication, merci! C'est en fait très proche de ce dont j'avais besoin.
Vous êtes la bienvenue, content d'avoir pu aider

InformationsquelleAutor

0

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

il est en fait un problème de navigateur... utilisez -webkit - pour chrome

InformationsquelleAutor jBear Graphics

Vous devez vous connecter pour publier un commentaire.