CSS3 animation ne fonctionne pas sous safari
J'ai un peu de CSS3 animation qui fonctionne parfaitement dans tous les navigateur qui soutiennent CSS3 à l'exception de safari. Bizarre n'est-ce pas? Ok, voici mon code:
HTML
<div class="right">
<div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>
CSS
.landing .board .right {
width: 291px;
height: 279px;
background: url('../images/landing/key-pnl.png');
bottom: 16px;
right: 250px;
position: absolute;
}
.landing .board .right .key-arm {
position: absolute;
left: 44px;
top: 18px;
width: 41px;
height: 120px;
}
/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes keyarm {
0% { -moz-transform: rotate(0deg); }
5% { -moz-transform: rotate(-14deg); }
10% { -moz-transform: rotate(0deg); }
}
@-ms-keyframes keyarm {
0% { -ms-transform: rotate(0deg); }
5% { -ms-transform: rotate(-14deg); }
10% { -ms-transform: rotate(0deg); }
}
@-o-keyframes keyarm {
0% { -o-transform: rotate(0deg); }
5% { -o-transform: rotate(-14deg); }
10% { -o-transform: rotate(0deg); }
}
@keyframes keyarm{
0% { transform: rotate(0deg); }
5% { transform: rotate(-14deg); }
10% { transform: rotate(0deg); }
}
.right .key-arm{
-webkit-transform-origin: 12px 105px;
-moz-transform-origin: 12px 105px;
-ms-transform-origin: 12px 105px;
-o-transform-origin: 12px 105px;
transform-origin: 12px 105px;
-webkit-animation: keyarm 8s ease-in-out 0s infinite;
-moz-animation: keyarm 8s ease-in-out 4s infinite;
-ms-animation: keyarm 8s ease-in-out 4s infinite;
-o-animation: keyarm 8s ease-in-out 4s infinite;
animation: keyarm 8s ease-in-out 0s infinite;
}
Ok cela ne fonctionne pas avec Safari comme je l'ai dit, il n'y a pas de mouvement que ce soit.
Aussi, toujours et seulement dans Safari, la clé de bras div affiche uniquement si vous redimensionnez l'écran! C'est là, dans les DOM, mais pour quelque raison il ne veut pas s'afficher!
Ce que je fais mal?
Grâce
Mauro
Mise à JOUR: Ok à partir de vos réponses j'ai que les @keyframes n'est pas pris en charge sur Safari 4. C'est étrange parce que sur la même page, j'ai une animation qui fonctionne à l'aide de @keyframes!
voici le code CSS:
.board .rays{
background: url("../images/landing/rays.gif") no-repeat 0 0 red;
height: 381px;
left: 251px;
opacity: 1;
top: 80px;
width: 408px;
position: absolute;
}
.board .bottle{
background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
bottom: 30px;
height: 405px;
left: 276px;
width: 357px;
z-index: 1;
position:absolute;
}
/*=== Rays Animation ===*/
@-webkit-keyframes rays{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
.board .rays{
-webkit-animation: rays 40s linear 0s infinite;
-moz-animation: rays 40s linear 0s infinite;
animation: rays 40s linear 0s infinite;
}
Et le code html:
<div class="board">
<div class="rays"></div>
<div class="bottle"></div>
</div>
Essayer vous-même dans jsFiddle (si vous avez Safari 4) et vous verrez
- Pouvez-vous faire un jsfiddle? jsfiddle.net
- ici, il s'agit: jsfiddle.net/zalun/E4mz9 je n'ai pas tester encore, dans Safari, cependant.
- jsfiddle.net/E4mz9/14 Voici le lien, désolé! Par la voie ne fonctionne pas sous Safari, juste testé
- Où est la
rays
animation sans préfixes de navigateur?
Vous devez vous connecter pour publier un commentaire.
Trouvé la solution. Dans Safari lorsque vous utilisez des images clés, vous devez utiliser l'ensemble de pourcentage:
cela ne fonctionne pas:
ce sera:
Ne sais pas pourquoi, mais c'est la façon Safari fonctionne! 🙂
left
de la propriété, avecfrom
etto
, parfaitement de travail sur l'ensemble de l'environnement (y compris safari IOS). Il ne fonctionne plus lors de l'animation-webkit-transform
J'ai eu des problèmes avec CSS3 animation de travail dans Safari 6, mais pas dans Safari 4 (4.0.5).
Il semble que la notation abrégée ne fonctionnera pas dans Safari 4.
Si cela ne fonctionne pas :
Mais cela va fonctionner :
Dans les situations où vous êtes en essayant d'animer
transform
sur quelque chose dès qu'il est injecté dans les DOM, j'ai dû ajouter un très bref délai, comme ceci:animation: rays 40s linear 0.01s infinite;
Cela fonctionne sur iphone 3 ios 6.1.6
avec
-webkit-
préfixe de la transformation et de l'animation