Est-il possible de définir une durée/délai différent pour les options de transformation ?

Question

Je souhaite définir plusieurs options de transformation pour mon objet HTML mais avec une durée et un délai différents.

Si j'essaie d'utiliser quelque chose comme ça :

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

Ensuite, j'aurai une fonction temporelle différente pour la transformation et l'opacité, mais puis-je définir différentes options pour la rotation et l'échelle, par exemple.faire une rotation pendant 10 s et une échelle de 20 s ?

Answer 1

Probablement pas directement, mais le même effet peut être obtenu en éléments d'imbrication.

Answer 2

Oui, vous pouvez le faire directement avec des animations CSS3. Si vous avez une opacité de transformation de 0 à 1 qui dure 20 secondes, et une rotation de 90 degrés qui dure 10 secondes, puis vous créez une image clé à 10 secondes avec l'opacité 0,5 et rotation de 90 degrés et une autre image clé à 20 secondes avec l'opacité 1 et une rotation de 90 degrés. Il est en quelque sorte d'une douleur, mais cela fonctionnera. Imbrication est divs un peu plus propre (comme Doug dit ci-dessus)

Ok est le code ici:

@-webkit-keyframes foo {
 0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
 }
 50% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0.5;
 }

 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
 }

Et vous mettriez

-webkit-animation-duration: 20s;

dans votre code HTML.

Answer 3

Ce problème serait de faire comme Doug a dit que si vous avez la perspective 3D dans votre animation. Probablement vous pouvez utiliser « transformer style: preserve-3d », mais il ne fonctionne pas dans IE 10-11 et travaille étrange dans tous les autres navigateurs Firefox eXept. La seule solution que je pense est d'utiliser des animations CSS3. Dans votre cas, il serait:

@-webkit-keyframes rotate_scale {

    0% {
        -webkit-transform: rotate(0deg) scale(0);
     }
     50% {
        -webkit-transform: rotate(90deg) scale(0);
     }
     100% {
        -webkit-transform: rotate(180deg) scale(2);
     }
}
@keyframes rotate_scale {

    0% {
        transform: rotate(0deg) scale(0);
     }
     50% {
        transform: rotate(90deg) scale(0);
     }
     100% {
        transform: rotate(180deg) scale(2);
     }
}

Vous pouvez régler la durée la plus longue de vos transformations. Par exemple 20 secondes pour la rotation: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; puis calculer juste au moment où votre autre transform commencera. Dans l'échelle examle commence en dix secondes après la rotation. Donc, ce serait une moitié de temps plein (50%). Et il durera 10 secondes ainsi jusqu'à la fin du temps plein (100%). Mais si vous souhaitez faire une durée de 5 secondes échelle par exemple, vous aurez besoin d'ajouter de nouvelles 75% { transform: rotate(135deg) scale(2); } KeyFrame y écrire deux transformations .