Как добавить задержку между повторением бесконечной анимации с помощью переопределения CSS - PullRequest
Новая
       14

Как добавить задержку между повторением бесконечной анимации с помощью переопределения CSS

0 голосов
/ 29 ноября 2018

Я отправляю файл Animate.css из этого CDN на мой сайт WordPress и хотел бы создать некоторые переопределения классов CSS, которые позволят мне отложить количество времени до повторения анимации,В настоящее время анимации настроены на «бесконечное» повторение.

Вот живой пример того, как анимированное изображение просто повторяется, очень быстро.

Я бы хотелчтобы можно было применять class = "delay4", например, если бы я хотел, чтобы после анимации была задержка в 4 секунды.Затем после этих четырех секунд анимация повторяется.

Я могу легко добавить переопределения CSS к своей теме, так что это будет наилучшим вариантом, так как я использую CDN.

БОНУС !!Было бы идеально, если бы я мог также указать продолжительность анимации.то есть некоторые анимации происходят так быстро, и я думаю, что если они немного замедлятся, они могут выглядеть лучше.

1 Ответ

0 голосов
/ 30 ноября 2018

У меня есть два решения, одно из которых основано исключительно на CSS, а другое - на animate.css + jquery.

Css Решение: 

img {
  animation: shake 5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  2% { transform: translate(-1px, -2px) rotate(-1deg); }
  4% { transform: translate(-3px, 0px) rotate(1deg); }
  6% { transform: translate(3px, 2px) rotate(0deg); }
  8% { transform: translate(1px, -1px) rotate(1deg); }
  10% { transform: translate(-1px, 2px) rotate(-1deg); }
  12% { transform: translate(-3px, 1px) rotate(0deg); }
  14% { transform: translate(3px, 1px) rotate(-1deg); }
  16% { transform: translate(-1px, -1px) rotate(1deg); }
  18% { transform: translate(1px, 2px) rotate(0deg); }
  20% { transform: translate(1px, -2px) rotate(-1deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
<img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/>

Решение Jquery: 

var $post = $(".img1");
setInterval(function(){
    $post.toggleClass("animated");
}, 4000);
div{ text-align:center; with:100%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<div class=" shake  infinite animated img1"><img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/></div>
...