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

Je veux mettre plusieurs options de transformation pour mon objet html, mais avec une durée différente et le retard.

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;

Alors j'aurai différents temps de la fonction de transformation et d'opacité, mais puis-je définir les différentes options de rotation et d'échelle, rotation pendant 10s et l'échelle 20s?

source d'informationauteur Ilya Tsuryev

  1. 5

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

  2. 10

    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é, 5 et rotation de 90 degrés et une autre image clé à 20 secondes avec une opacité de 1 et la rotation de 90 degrés. C'est une sorte de douleur, mais il faudra travailler. L'imbrication divs est un peu plus propre (comme Doug dit ci-dessus)

    Ok voici le code:

    @-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 que vous souhaitez mettre

    -webkit-animation-duration: 20s;

    dans votre code HTML.

  3. 0

    Ce serait problème pour le faire comme Doug a dit: si vous avez une perspective 3d dans votre animation. Probablement, vous pourriez utiliser "transform-style: preserve-3d", mais il ne fonctionne pas dans IE 10-11 et travaille bizarre dans tous les autres navigateurs sauf Firefox. Donc, la seule solution je pense est d'utiliser les 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);
     }
}

    De sorte que vous pouvez définir la durée de votre transforme. Par exemple 20 secondes de rotation: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; Et puis il suffit de calculer lors de votre autre transformation va commencer. Dans l'exemple de l'échelle commence dans dix secondes après la rotation. Donc, ce serait un semestre à temps plein ( 50% ). Et elle devait durer 10 secondes jusqu'à la fin des temps plein ( 100% ). Mais si vous souhaitez faire à l'échelle de la durée de 5 secondes par exemple, vous devez ajouter une nouvelle image clé 75% { transform: rotate(135deg) scale(2); } et y écrire deux transforme.