1
votes

Un délai entre les répétitions d'animation css

J'essaie de créer une animation où chaque lettre est déplacée séparément, ce qui fonctionne bien mais quand j'ajoute l'infini, il n'y a pas de délai entre les boucles, donc les lettres se déplacent constamment l'une après l'autre. J'ai essayé d'ajouter un délai d'animation à l'animation de base, mais cela ralentit simplement la vitesse de l'animation.

<div class="anim">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, tellus id cursus interdum, eros mauris bibendum risus, non commodo diam urna et massa.
  </p>
  <p>
    Integer gravida vulputate nisl, at ultrices felis convallis vitae. Cras tincidunt lacus eget lectus commodo iaculis. Pellentesque et urna arcu. Integer eu enim a velit sagittis iaculis eu ut nulla.
  </p>
  <p>
    Etiam ac felis id odio dapibus tincidunt id eu mi. Etiam accumsan sagittis ipsum, sed ornare nulla malesuada in. Phasellus gravida risus vel tellus eleifend condimentum. Maecenas sed tellus ipsum. Sed vitae mi ultricies, placerat turpis cursus, accumsan purus. Donec augue tellus, pulvinar vel sapien quis, rhoncus feugiat elit.
  </p>
  <p>
    Nulla non ipsum eleifend turpis interdum euismod. Donec volutpat arcu id sem tristique faucibus. Praesent pulvinar mauris sit amet mi fringilla, a dapibus erat sollicitudin.
  </p>
</div>

@keyframes move {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(4vh)
    }
}
    
.anim p {
    animation: move 0.7s ease-in-out forwards;
    animation-timing-function: linear;
}

.anim:nth-child(1) p { animation-delay: 0.5s }
.anim:nth-child(2) p { animation-delay: 1s }
.anim:nth-child(3) p { animation-delay: 1.5s }
.anim:nth-child(4) p { animation-delay: 2s }

Je veux être infini avec des délais entre les boucles après le redémarrage à la position initiale, actuellement il démarre directement.

css css-animations infinite

1 commentaires

exécutez le code sur lien et partagez le lien. Pour que nous sachions où est l'erreur

3 Réponses :

0
votes

Vous pouvez faire fonctionner votre animation de 0 à 30% et laisser le reste comme un "délai" avant que l'animation ne se répète

Vérifiez ceci: https://css-tricks.com/css -keyframe-animation-delay-iterations /

0 commentaires

1
votes

Vous pouvez le faire comme suit, c'est-à-dire en créant la phase non active en fonction des états des images clés:

<div>
  <div class="anim">
    <p>A</p>
  </div>
  <div class="anim">
    <p>B</p>
  </div>
  <div class="anim">
    <p>C</p>
  </div>
  <div class="anim">
    <p>D</p>
  </div>
</div>

@keyframes move {
  0% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(4vh)
  }
  40% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(0)
  }
}
.anim, p {
  display: inline-block;
}
.anim p {
  animation: move 3s ease-in-out infinite;
}

.anim:nth-child(1) p {
  animation-delay: 0.5s
}

.anim:nth-child(2) p {
  animation-delay: 1s
}

.anim:nth-child(3) p {
  animation-delay: 1.5s
}

.anim:nth-child(4) p {
  animation-delay: 2s
}

0 commentaires

1
votes

Je pense que vous avez vraiment besoin de la configuration d'animations d'images clés sur mesure pour chaque élément individuel que vous souhaitez animer - animation-delay ne va pas vous aider ici.

J'ai joué un peu codepen et ont créé un mixin avec les fonctions d'accompagnement pour générer les animations d'images clés individuelles pour vous .

Le mixin est montré ci-dessous. Je n'ai pas inclus les fonctions mais vous les trouverez sur le lien codepen.

<div class="anim">
    <p>A</p>
</div>
<div class="anim">
    <p>B</p>
</div>
<div class="anim">
    <p>C</p>
</div>
<div class="anim">
    <p>D</p>
</div>

Vous appelleriez le mixin comme ci-dessous.

.anim { display: inline-block; }

.anim:nth-child(1) p {
    animation: move1 0.7s ease-in-out forwards infinite;
}

@keyframes move1 {
    18.5185185185% {
        transform: translateY(0);
    }
    44.4444444444% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

.anim:nth-child(2) p {
    animation: move2 0.7s ease-in-out forwards infinite;
}

@keyframes move2 {
    37.037037037% {
        transform: translateY(0);
    }
    62.962962963% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

.anim:nth-child(3) p {
    animation: move3 0.7s ease-in-out forwards infinite;
}

@keyframes move3 {
    55.5555555556% {
        transform: translateY(0);
    }
    81.4814814815% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

.anim:nth-child(4) p {
    animation: move4 0.7s ease-in-out forwards infinite;
}

@keyframes move4 {
    74.0740740741% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

0 commentaires