Discussion :

[pouemes]

bonjour
je voudrais enchainer l'animation d'une image d'abord sur un axe vertical puis horizontal
j'ai trouve ceci

Code :

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
39
40
41
42
43
44
45
46
 <style>
div.slidecaption {
   -webkit-animation-name: spinner; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 12s;
  -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
  animation-delay: 2s;
  animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 12s; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}
 
 
/* WebKit and Opera browsers */ 
@-webkit-keyframes spinner { 
  from 
  { 
    -webkit-transform: rotateY(0deg); 
  } 
  to { 
    -webkit-transform: rotateY(-360deg); 
  } 
} 
/* all other browsers */ 
@keyframes spinner { 
   from { 
    -moz-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
   } 
   to 
   { 
    -moz-transform: rotateY(-360deg); 
    -ms-transform: rotateY(-360deg); 
    transform: rotateY(-360deg); 
 
   } 
}
</style>
 <div class="slidecaption" style="width: 170px; height: 145px;"><img src="monimage.gif"></div>

Si je change les Y par de X j'ai une rotation sur un axe horizontal mais comment enchainer les deux sur la meme image et pouvoir stoper l'animation quand on met la souris?

merci

[NoSmoking]

Bonjour,
dans ta @keyframes spinner il te faut faire plus qu'un simple from {}...to{}, il te faut définir les séquences que tu souhaites à savoir dans le cas que tu décris :

• flip vertical
• flip horizontal
• retour flip horizontal
• retour flip vertical

Pour la progression des séquences on utilise le % qui représente la position, en temps, dans l'animation complète et cela se traduit par l'écriture suivante :

Code :

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

1
2
3
4
5
6
7
@keyframes spinner { 
   0% { transform: rotateY(0deg)    rotateX(0deg);}     /* position de départ */
  25% { transform: rotateY(0deg)    rotateX(-180deg);}  /* flip vertical */   
  50% { transform: rotateY(-180deg) rotateX(-180deg);}  /* flip horizontal */ 
  75% { transform: rotateY(0deg)    rotateX(-180deg);}  /* re-flip horizontal */
 100% { transform: rotateY(0deg)    rotateX(0deg);}     /* re-flip vertiacal */  
}

Nota: au lieu de revenir à 0 tu pourrais également continuer la rotation jusqu'à -360deg, c'est équivalent au niveau rendu.

Concernant l'arrêt, plutôt la mise en pause, de l'animation il te faut ajouter

Code :

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

1
2
3
.slidecaption:hover {
  animation-play-state: paused;
}

[pouemes]

merci nosmoking
en fait j'ai pas mal cherche de mon cote
j'en suis arrive a ce genre de code mais j'ai un probleme d'image un peu surligne au passage de la seconde image
puis et surtout a la fin de l'animation ca deraille completement, et j'ai beau tester differentes choses je ne vois pas quoi faire, si quelqu'un avait des idees
merci

Code :

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
 <style>
.slidecaption {
  position:relative;
  height:145px;
  width:170px;
  margin:0 auto;
}
.slidecaption img {
  position:absolute;
  left:0;
}
#test1 {  
             animation: spinner 12s linear infinite;
 
  transform-style: preserve-3d;
}
#test2 {  
             animation: spinner1 12s linear infinite;
 
  transform-style: preserve-3d;
}
.slidecaption:hover 
{
     animation-play-state: paused;
 
}
img:nth-of-type(1) {
  animation-delay: 2s;
}
img:nth-of-type(2) {
  animation-delay: 2s;
}
@keyframes spinner{0%{opacity:0;transform:rotateY(0deg);}5%{opacity:1;transform:rotateY(18deg);}10%{opacity:1;transform:rotateY(36deg);}15%{opacity:1;transform:rotateY(54deg);}20%{opacity:1;transform:rotateY(72deg);}25%{opacity:1;transform:rotateY(90deg);}30%{opacity:1;transform:rotateY(108deg);}35%{opacity:1;transform:rotateY(126deg);}40%{opacity:1;transform:rotateY(144deg);}45%{opacity:1;transform:rotateY(162deg);}50%{opacity:1;transform:rotateY(180deg);}55%{opacity:0;transform:rotateY(198deg);}60%{opacity:0;transform:rotateY(216deg);}65%{opacity:0;transform:rotateY(234deg);}70%{opacity:0;transform:rotateY(252deg);}75%{opacity:0;transform:rotateY(270deg);}80%{opacity:0;transform:rotateY(288deg);}85%{opacity:0;transform:rotateY(306deg);}90%{opacity:0;transform:rotateY(324deg);}95%{opacity:0;transform:rotateY(-342deg);}100%{opacity:0;transform:rotateY(360deg);}}
@keyframes spinner1{0%{opacity:0;transform:rotateX(-180deg);}5%{opacity:0;transform:rotateX(-162deg);}10%{opacity:0;transform:rotateX(-144deg);}15%{opacity:0;transform:rotateX(-126deg);}20%{opacity:0;transform:rotateX(-108deg);}25%{opacity:0;transform:rotateX(-90deg);}30%{opacity:0;transform:rotateX(-72deg);}35%{opacity:0;transform:rotateX(-54deg);}40%{opacity:0;transform:rotateX(-36deg);}45%{opacity:0;transform:rotateX(-18deg);}50%{opacity:1;transform:rotateX(0deg);}55%{opacity:1;transform:rotateX(18deg);}60%{opacity:1;transform:rotateX(36deg);}65%{opacity:1;transform:rotateX(54deg);}70%{opacity:1;transform:rotateX(72deg);}75%{opacity:1;transform:rotateX(90deg);}80%{opacity:1;transform:rotateX(108deg);}85%{opacity:1;transform:rotateX(126deg);}90%{opacity:1;transform:rotateX(144deg);}95%{opacity:1;transform:rotateX(-162deg);}100%{opacity:1;transform:rotateX(180deg);}}
</style>
 <div class="slidecaption">
 	<img id="test1" src="http://pouemes.free.fr/poemes-amour/poeme-abe.gif">
 	<img id="test2" src="http://pouemes.free.fr/poemes-amour/abe.gif"></div>

[pouemes]

et

Code :

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

1
2
3
.slidecaption:hover {
  animation-play-state: paused;
}

ne fonctionne pas sur mon code je ne sais pourquoi
et je voudrais avoir le meme rendu qu'avec mon javascript
comme ici
http://pouemes.free.fr/traduction-afrique/poeme-abe.htm

[NoSmoking]

J'ai du mal à comprendre pourquoi tu passes par 2 images dont une est le « miroir horizontal » de l'autre, c'est strictement le résultat que tu devrais obtenir avec le code que je t'ai mis !

Nota : sur ta page le retournement vertical n'est pas cohérent avec la réalité.

Un exemple à tester tel que

Code :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Flip horizontal/vertical</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
h1, h2, h3 {
  color:#069;
}
main {
  max-width:60em;
  margin: auto;
  display:block;
}
.slidecaption {
  width:13em;
  padding:1em;
  margin:auto 2em;;
  text-align:center;
  animation-name: spinner;
  animation-timing-function: linear; 
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-duration: 8s; 
  transform-style: preserve-3d;
  cursor:pointer;
  box-shadow: 0 0 2px #888;
  background:#fafafa;
}
.slidecaption:hover {
  animation-play-state: paused;
}
@keyframes spinner { 
   0% { transform: perspective(400px) rotateY(0deg)    rotateX(0deg);}     /* position de départ */
  25% { transform: perspective(400px) rotateY(-180deg) rotateX(0deg);}     /* flip horizontal */ 
  50% { transform: perspective(400px) rotateY(-180deg) rotateX(-180deg);}  /* flip vertical */
  75% { transform: perspective(400px) rotateY(0deg)    rotateX(-180deg);}  /* re-flip horizontal */
 100% { transform: perspective(400px) rotateY(0deg)    rotateX(0deg);}     /* re-flip horizontal */  
}
</style>
</head>
<body>
<main>
  <h1>Flip horizontal/vertical</h1>
  <h2>Démo</h2>
  <div class="slidecaption">
    <img src="http://pouemes.free.fr/poemes-amour/abe.gif">
  </div>
  <h2>Ressources</h2>
  <ul>
    <li><a href="http://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a></li>
    <li><a href="http://www.w3.org/TR/css3-animations/">CSS Animations</a></li>
  </ul>
</main>
</body>
</html>