Rotate/translate dans un keyframe pour retour à l'état initial

Invité · 03/01/2016, 14h01

Bonne année à tous

Je déplace un objet, je lui fait faire une rotation puis je veux le remettre à son emplacement de départ.

Voici le keyframe que j'ai fait qui fonctionne bien avec Chrome :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@keyframes deplacement {
  0%   { left: 50%; top: 30em; }
  10%  { transform: rotate(0deg) translate(20em,0em) rotate(0deg); }
  90%  { transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { transform: translate(0em,0em); }
}

C'est bien ce keyframe qui est aussi utilisé par Safari mais dans ce cas la rotation ne se fait pas ...

Voici un autre test qui fait bien la rotation avec Chrome et Safari. Mais dans ce cas, l'objet ne revient pas à l'endroit initial en ligne droite mais en faisant une sorte de rotation inversée ...

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@keyframes deplacement {
  0%   { left: 50%; top: 30em; }
  10%  { transform: rotate(0deg) translate(20em,0em) rotate(0deg); }
  90%  { transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { left: 50%; top: 30em; }
}

Avez-vous une idée de la source de ces problèmes ?
Merci d'avance.

**NoSmoking** · 04/01/2016, 17h38

Bonjour,
sans avoir la structure HTML et le CSS de départ il va être difficile de t'aider.

Invité · 05/01/2016, 00h03

Voici le code complet qui n'a rien d'important (c'est juste mon avis) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <style>
.image {
  width: 128px;
  height: 128px;
  background-image: url(./image.png);
  position: absolute;
  left: 50%;
  top: 30em;
  animation: deplacement 10s linear infinite;
}
 
/*
@keyframes deplacement {
  0%   { left: 50%; top: 30em; }
  10%  { transform: rotate(0deg) translate(20em,0em) rotate(0deg); }
  90%  { transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { transform: translate(0em,0em); }
}
*/
 
@keyframes deplacement {
  0%   { left: 50%; top: 30em; }
  10%  { transform: rotate(0deg) translate(20em,0em) rotate(0deg); }
  90%  { transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { left: 50%; top: 30em; }
}
    </style>
  </head>
  <body>
    <div class="image"></div>
  </body>
</html>

**NoSmoking** · 05/01/2016, 20h42

C'est bien ce keyframe qui est aussi utilisé par Safari mais dans ce cas la rotation ne se fait pas ...

de quel SAFARI parles tu, si c'est celui sous windows il te faut ajouter le préfixe propriétaire -webkit-.

Comme tu définis left: 50%; top: 30em, il est inutile de les mettre au stade 0%.

Au final je ferais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
@-webkit-keyframes deplacement {
  10%  { -webkit-transform: rotate(  0deg) translate(20em,0em) rotate(   0deg); }
  90%  { -webkit-transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { -webkit-transform: rotate(360deg) translate( 0em,0em) rotate(-360deg); }
}
@keyframes deplacement {
  10%  { transform: rotate(  0deg) translate(20em,0em) rotate(   0deg); }
  90%  { transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { transform: rotate(360deg) translate( 0em,0em) rotate(-360deg); }
}

en mettant dans les propriétés image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.image {
  -webkit-animation: deplacement 10s linear infinite;
          animation: deplacement 10s linear infinite;
}

mais sous réserve qu'il s'agisse de Safari Windows, plus franchement utilisé

Invité · 05/01/2016, 22h30

Envoyé par NoSmoking

Comme tu définis left: 50%; top: 30em, il est inutile de les mettre au stade 0%.

C'est bon à savoir

Au final c'est la modification de cette ligne qui a corrigé le problème.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

100% { transform: rotate(360deg) translate(0em,0em) rotate(-360deg); }

Il s'agissait de Safari sous OSX

Merci pour ton aide

Rotate/translate dans un keyframe pour retour à l'état initial [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager