CSS3动画怎么实现每个一段时间播放一次

html-css09

CSS3动画怎么实现每个一段时间播放一次,第1张

可以。前提你得设置2次以上,比如

第一种:animation:4s 10 5s

4s本次运动时间,10是动画10次 5s是等5秒开始动画

第二种:animation-delay:5s 延迟后运行

第三种:需要animation-name: xxoo(xxoo是说本次你做的动画叫什么,纯属自己定义!不要以为这是h5标签XXOO)

@keyfrarmes xxoo

  0%{}

  10%{}

  30%{ 你做的动画已经完成 }

  100%{剩下的跟100%一模一样,就相当于等了几秒}

}

animation-iteration-count:3控制动画循环播放3次

animation-iteration-count:infinite规定动画应该无限次播放

一、实现CSS3无限循环动画代码示例。

代码如下:

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg)

border:5px solid red

}

50%{

-webkit-transform: rotate(180deg)

background:black

border:5px solid yellow

}

100%{

-webkit-transform: rotate(360deg)

background:white

border:5px solid red

}

}

.loading{

border:5px solid black

border-radius:40px

width: 28px

height: 188px

-webkit-animation:gogogo 2s infinite linear

margin:100px

}

扩展资料

实现动画无限循环所需要的CSS属性说明:

1、infinite

在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。