Mission #7 - Animation, image qui tourne [Initié]

Bonjour bande de moussaillon !

Je viens vous proposer pour cette septième mission de tourner de l'œil /pan. En fait, j'aimerais (plutôt que de vous voir vous tourner de l'œil) voir une image tourner.

Pour vous aider, nous avons une image comme ceci :



L'image est droite, cependant au survol de la souris, cette dernière fera un tour des aiguilles d'une montre (complet ou non). On arrivera à quelque chose comme ça au survol :




Comment peut-on réaliser cet effet de transition ? Quels problèmes peuvent se posent ? Quelles connaissances doit-on avoir ?
N'hésitez pas à participer à cette mission, vous n'êtes pas forcé de poster le résultat, vous pouvez simplement intervenir pour apporter le principe théorique de la réalisation de cet effet afin que tout le monde en discute !

Pour laisser une chance à tout le monde de participer, pensez à mettre votre code sous

Code:

[hide][/hide]

Gihiiiiiiiiiii *w* Transitions poweeeeeeeeeeeer *-*

Super initiative cette mission!

Alors, j'avoue à la base, les transformations, ça me faisait vachement peur (j'ai commencé à les utiliser assez récemment!) pas les petits trucs simples comme ça, mais le système de cacher un bloc sous un autre, parce que ça fait aussi appel aux positions relatives et absolutes, tout ça. Mais au final à force de trainassouiller dans les codes, j'ai fini par comprendre le système U_U

du coup pour le rendu...



N'empêche je trouve ça chouette le CSS 3, au niveau des transformations, justement, ça a mis pas mal de mouvement dans les pages web xD

Bam!

Genre comme ça?

Onyx: En fait, c'est pas exactement vrai, l'histoire de mettre les propriétés dans l'état par défaut de ta div / class / id. Vu qu'en fait, Toutes les propriétés, qu'elles soient définis ou non dans ton CSS ont une valeur initial par défaut. Donc utiliser transform uniquement dans le hover est suffisant. Techniquement c'est comme si on passait de la valeur initial quand l'état de la balise est par défaut, à un transform quand l'état de la balise passe en hover. Et vice versa. ^-^

Sinon c'est cool ce que vous avez fait toutes les deux. =)
Moi je suis entrain de réfléchir pour faire un encore plus compliqué pour arriver au même résultat.

Edit: J'ai pas trouvé un truc super epic à faire, du coup j'ai fait ça ><





Ah et petite note aussi, pour les feignants.
Les préfixe -webkit- -ms- -moz- ne sont plus utile pour transform (seulement les transformations en 2D) et transition depuis quelques versions des navigateurs. \o/
Et petit lien utile: http://caniuse.com/#search=transform

Tu as pas mis ton code Sca (en hide u_u)
Mais c'est exactement ce que je voulais obtenir x) Je plussoie pour les préfixes.

Et si au lieu de le faire bouger à droite, tu le faisais descendre, ça donnerait quoi ?

Euh bha ça donnerait ça:

Ha, et moi qui perds mon temps à mettre les valeur initiale pour rien T_T

Par contre, les transforms et les transitions ne fonctionnent toujours pas sans le préfixe webkit sur Safari, alors c'est pour ça que je continue à l'utiliser ^^

Ah oui, exact.. Safari.. ><
Sont chiant ! xD

Han je l'avait oublié celui-là Va falloir que je revois mes conseils

Voilà un essai ! Je n'ai pas mis de transition pour le "retour", je trouvais ça marrant ^^

Code:

<style>#alice{border-radius:50%; width:148px;box-shadow: 1px 1px 10px #EEEEEE;}#alice:hover{transform:rotate(360deg);transition: all 1s ease;}</style>

<div id="alice"><img src="http://nsa34.casimages.com/img/2015/02/05/150205062326709863.png" /></div>

J'aime bien l'idée du "sans retour". Ça change x)

J'ai trouvé ça un peu par hasard à vrai dire... Mais ça me donne des idées ! par exemple un avatar qui descende au hover, et qui au "onmouseout" enfin vous avez compris ^^' revienne par le haut... jvais faire un test !





Ouf, réussi ^^' c'est un peu lent, mais bon...

Code:

<style>.blocalu{height:100px; width:100px; box-shadow:1px 1px 5px #AAAAAA; position:relative;overflow:hidden;}.dessous{width:100px;height:100px; position:absolute; background:white; transition: z-index 0s 0.5s; z-index:1;}.blocalu: hover .dessous{z-index:2;} .voletalu{z-index:2;height:100px;width:100px; margin-top:0;overflow:hidden; position:absolute; top:0; left:0; transition:z-index 0s 0.5s, top 0.5s 0.5s linear, margin-top 0.5s;} .blocalu:hover .voletalu{ z-index: 0; top: -100px; margin-top: 100px; }</style>

<div class="blocalu"><div class="dessous"></div><div class="voletalu"><img src="http://nsa34.casimages.com/img/2015/02/05/150205062326709863.png" /></div></div>

Shaneliae a écrit:

J'ai toujours eu un peu de misère avec les animations mais maintenant je me débrouille au moins avec le hover et les différents transforms ! Mais bon, j'ai encore besoin de pas mal d'entraînement tout de même >.< Ton idée Alu' m'en a donné une autre ! On garde l'idée de l'avatar qui tourne, mais quand il tourne, il fait apparaître les infos qu'il cache ! Enfin, je vais tenter un petit truc sympa

A-lice

Bon, c'est un peu du bidouillage et j'ai fait l'animation dans l'autre sens xD J'aurais bien aimé aussi que quand le curseur s'enlève, l'image continue de tourner dans le même sens pour revenir à son point de départ, mais là c'est au-dessus de mes connaissances

Une solution possible pour finir le tour d'après moi :)

Sauf que dans ton message, l'image ne tourne pas

Hum, c'est bizzare, je viens de tester sur FF, Opera, Chromium, Microsoft Edge et IE8, et a part sur IE8 tous marchait bien, tu à quel navigateur ??

Chrome, mais là au boulot ça fonctionne. Sur Chromium (de linux) donc chez moi, ça ne fonctionnait pas

J'aime beaucoup ta solution Ash ! Je vais étudier ça d'un peu plus près

Sinon je sais aussi qu'il vaut mieux ajouter des préfixes -webkit- dans les transforms tout simplement pour les versions mobiles (tournant sous Android, les autres je ne sais plus trop...). J'ai testé sur ma tablette et mon mobile tournant sous Android, et seuls ceux qui ont bien pensé à mettre le préfixe fonctionnent !

Sinon, du coup j'aimerais rappeler un petit tuto de Manumanu que je trouve bien fait sur ces petits préfixes ici et le super site de Can I Use qu'elle nous donne et que j'utilise très souvent maintenant. En clair si c'est en vert, c'est que la méthode choisit fonctionne, si il y a un petit - jaune c'est qu'il faut un préfixe et si c'est rouge, alors ça ne fonctionne pas sous ce navigateur.
Donc en clair, le webkit est encore utile pour au moins 3 navigateurs, mais c'est le seul encore nécessaire Par contre il est vrai que si on a de vieilles versions de navigateurs, là ça peut poser problème (comme sous IE8 qui ne prend en charge pas grand chose...)
Pour les transitions c'est pareil, il faut encore le préfixe webkit uniquement pour les navigateurs Android (celui fournit de base, pas les chromes ou autres)

Par contre, il est dommage que ce site ne donne pas pour Chromium mais uniquement les navigateurs les plus courants

Moi, j'essaye!



pas mal hein

Wow, sympa ta transition ! Tu nous mettrais ton code, en hide ?

Voilà!

J'avoue que c'est pas mal du tout ! Et ça augmente la complexité de la mission de message en message tout ça

Sympas ces animations, y aurait-il un tutoriel avec des transitions de la sorte ? :)

Je peu rien poster y a deja trop d'animations :p

Et bien et bien, que de belles animations de ce coté-ci ! Plutôt pas mal, un petit coup de coeur pour l'animation de Chione, et puis l'idée du Yoyo de Sca' est plutôt cool aussi ! Bravo les gens.