Repeat animation every 3 seconds

↘锁芯ラ 提交于 2019-11-27 05:36:19

With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.

In the below snippet, the following is what is being done:

  • The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
  • For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
  • For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
  • For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
  • The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(0px);}
  75% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>

The animation-delay property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
  animation-delay: 3s;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>

LIke this

html

<div class="halo halo-robford-animate"></div>

css

body{
  background: black;
}

.halo{
  width: 263px;
  height: 77px;
  background: url('http://i.imgur.com/3M05lmj.png');
}

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}

@-webkit-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes leaves {
   0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5
    }

    100% {
        opacity: 1;
    }
}

jsfiddle

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!