Les images-clés de rebond CSS3 ne fonctionnent pas

-1

J'essaye actuellement de créer une animation de rebond pour une flèche vers le bas. Cependant, je peux faire fonctionner l'animation mais les images clés ne sont pas reconnues, peu importe comment je change les valeurs. La flèche est une font-awesome fa-chevron-down. Mon site Web est en cours de construction avec wordpress.Les images-clés de rebond CSS3 ne fonctionnent pas

Mon code CSS est:

.view-more > i{ 
    font-size: 39px; 
    position: absolute; 
    bottom: 2%; 
    animation: bounce 2s infinite; 
    -webkit-animation: bounce 2s infinite; 
    -moz-animation: bounce 2s infinite; 
} 
@keyframes bounce{ 
    0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0); 
    } 
    40% { 
    transform: translateY(-10px); 
    } 
    60% { 
    transform: translateY(-3px); 
    } 
} 
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-10px); 
    } 
    60% { 
    -webkit-transform: translateY(-3px); 
    } 
} 
@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-10px); 
    } 
    60% { 
    -moz-transform: translateY(-3px); 
    } 
}

que je fais quelque chose de mal comme je l'ai googlé et de ce que j'ai trouvé cela devrait fonctionner.

J'ai également essayé jsfiddle et les images clés fonctionnent. Donc je suis vraiment confus. https://jsfiddle.net/yewtree/qh3v7fdk/

Toute aide aurait apprécié. Merci d'avoir pris le temps de lire ma question.

Source

2015-07-21 Mat Teague

Je ne l'ai jamais vu la syntaxe keyframe ordonné comme ça avant. Est-ce que les dupliquer et les mettre en ordre fonctionnent? (Comme dans: '0,20,40,50,60,80,100' au lieu de' 0,20,50,80,100,40,60') – somethinghere

Votre code fonctionne pour moi. Cependant, je l'ai changé l'ordre de la propriété animation pour inclure les préfixes fournisseurs premier (qui est préféré):

.view-more > i { 
 
    font-size: 39px; 
 
    position: absolute; 
 
    bottom: 2%; 
 
    -webkit-animation: bounce 2s infinite; 
 
    -moz-animation: bounce 2s infinite; 
 
      animation: bounce 2s infinite; 
 
} 
 
@keyframes bounce{ 
 
    0%, 20%, 50%, 80%, 100% { 
 
    transform: translateY(0); 
 
    } 
 
    40% { 
 
    transform: translateY(-10px); 
 
    } 
 
    60% { 
 
    transform: translateY(-3px); 
 
    } 
 
} 
 
@-webkit-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -webkit-transform: translateY(0); 
 
    } 
 
    40% { 
 
    -webkit-transform: translateY(-10px); 
 
    } 
 
    60% { 
 
    -webkit-transform: translateY(-3px); 
 
    } 
 
} 
 
@-moz-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -moz-transform: translateY(0); 
 
    } 
 
    40% { 
 
    -moz-transform: translateY(-10px); 
 
    } 
 
    60% { 
 
    -moz-transform: translateY(-3px); 
 
    } 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="view-more"> 
 
    <i class="fa fa-chevron-down"></i> 
 
    </div> 
 
</body> 
 
</html>

Source

2015-07-21 13:57:15 rnevius

Je ne vois pas ce que vous problème, voir l'extrait ci-dessous . Je l'ai un peu modifié pour que toutes les valeurs se suivent (et en général le rende plus lisible), et ont aussi augmenté vos maigres valeurs pour un peu plus vives, donc nous pouvons voir la différence. Votre animation fonctionne comme prévu.

@keyframes bounce{ 
 
    0% { transform: translateY(0); } 
 
    20% { transform: translateY(0); } 
 
    40% { transform: translateY(-50%); } 
 
    50% { transform: translateY(0); } 
 
    60% { transform: translateY(-20%); } 
 
    80% { transform: translateY(0); } 
 
    100% { transform: translateY(0); } 
 
} 
 
@-webkit-keyframes bounce { 
 
    0% { -webkit-transform: translateY(0); } 
 
    20% { -webkit-transform: translateY(0); } 
 
    40% { -webkit-transform: translateY(-50%); } 
 
    50% { -webkit-transform: translateY(0); } 
 
    60% { -webkit-transform: translateY(-20%); } 
 
    80% { -webkit-transform: translateY(0); } 
 
    100% { -webkit-transform: translateY(0); } 
 
} 
 
@-moz-keyframes bounce { 
 
    0% { -moz-transform: translateY(0); } 
 
    20% { -moz-transform: translateY(0); } 
 
    40% { -moz-transform: translateY(-50%); } 
 
    50% { -moz-transform: translateY(0); } 
 
    60% { -moz-transform: translateY(-20%); } 
 
    80% { -moz-transform: translateY(0); } 
 
    100% { -moz-transform: translateY(0); } 
 
} 
 
div { 
 
    background:red; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 20px; 
 
    height: 20px; 
 
    -webkit-animation: 1000ms bounce infinite; 
 
    animation: 1000ms bounce infinite; 
 
}

<div></div>

Source

2015-07-21 14:03:54 somethinghere

Les images-clés de rebond CSS3 ne fonctionnent pas

Répondre

Questions connexes