Keyframes

Bonjour à tous,
J'ai tenté d'avoir des explications sur un forum global, je m'en remet désormais à vous plus spécialisé :

Les keyframes sont une caractéristique relativement nouvelle du css.

Et perso je comprend pas bien comment les utilisé. J'ai compris la manière dont on créer l'animation. Mais pour l'utiliser...

Mon problème est le suivant. J'ai une div qui se voit affecter ou enlever la classe flip (grâce à JavaScript) lorsque je clique sur un button.

Sans cette classe cette div a pour valeur :

transform:perspective(1000px) rotateY(0deg);

Lorsque la classe est affecter, cette div prend pour valeur :

transform:perspective(1000px) rotateY(-90deg);

En afectant des transition sur la div, j'obtient le résultat escompté voici le lien.

Cependant dans une volonté de parfaire mon code, j'ai voulu faire en sorte que l'animation soit telle que la div se rotate (si j'ose dire) trop puis reviennent sur ces pas et enfin se stabilise.

L'animation que je créer au final grace au keyframe est :

@keyframes Plie {
    0% {
    -webkit-transform:perspective(1000px) rotateY(0deg);
    -moz-transform:perspective(1000px) rotateY(0deg);
    -o-transform:perspective(1000px) rotateY(0deg);
    -ms-transform:perspective(1000px) rotateY(0deg);
    transform:perspective(1000px) rotateY(0deg);
    transform-origin: 0% 30%;
    -webkit-transform-origin: 0% 30%;
    -ms-transform-origin: 0% 30%;
    -o-transform-origin: 0% 30%;
    -moz-transform-origin: 0% 30%;
         
    }
    85% {
    -webkit-transform:perspective(1000px) rotateY(-93deg);
    -moz-transform:perspective(1000px) rotateY(-93deg);
    -o-transform:perspective(1000px) rotateY(-93deg);
    -ms-transform:perspective(1000px) rotateY(-93deg);
    transform:perspective(1000px) rotateY(-93deg);
    transform-origin: 0% 30%;
    -webkit-transform-origin: 0% 30%;
    -ms-transform-origin: 0% 30%;
    -o-transform-origin: 0% 30%;
    -moz-transform-origin: 0% 30%;
    }
    95% {
    -webkit-transform:perspective(1000px) rotateY(-87deg);
    -moz-transform:perspective(1000px) rotateY(-87deg);
    -o-transform:perspective(1000px) rotateY(-87deg);
    -ms-transform:perspective(1000px) rotateY(-87deg);
    transform:perspective(1000px) rotateY(-87deg);
    transform-origin: 0% 30%;
    -webkit-transform-origin: 0% 30%;
    -ms-transform-origin: 0% 30%;
    -o-transform-origin: 0% 30%;
    -moz-transform-origin: 0% 30%;
    }
    100% {
    -webkit-transform:perspective(1000px) rotateY(-90deg);
    -moz-transform:perspective(1000px) rotateY(-90deg);
    -o-transform:perspective(1000px) rotateY(-90deg);
    -ms-transform:perspective(1000px) rotateY(-90deg);
    transform:perspective(1000px) rotateY(-90deg);
    transform-origin: 0% 30%;
    -webkit-transform-origin: 0% 30%;
    -ms-transform-origin: 0% 30%;
    -o-transform-origin: 0% 30%;
    -moz-transform-origin: 0% 30%;
    }
}

Cependant une fois que j'ai cette animation ne sait pas comment l'affecté pour avoir le même type d'effet que ci dessus.

Merci d'avance.

Bonjour,

As-tu pensé à chercher sur Google ?
Les articles sur le site des développeurs Mozilla (MDN) est très bien à ce niveau - et très détaillé.

La partie qui te manque est précisément l'affectation de l'animation à un élément, par exemple :

.transformation {
animation: Plie 3s 1;
}

Avec tous les préfixes vendeurs nécessaires évidemment !

À ce propos, les keyframes elles-même doivent être préfixées ( pour webkit notamment, qui est un peu en retard ), fais attention à la compatibilité.

Bonne continuation !!

Merci beaucoup pour ton aide. Au final je suis partit sur une animation plus cross browser. Mais je garde tout de meme ca pour plus tard.

Et oui j'avais chercher sur google mais vu qu'en plus il y avait un ptit peu de js méler dedans ce qui était afficher dans les tutos ne marchait pas au top.