css3 成功动画成果 怎么使他有限循环动下去 (css3总结)

本文目录导航：

• css3 成功动画成果，怎么使他有限循环动下去？
• 裁减资料

css3 成功动画成果，怎么使他有限循环动下去？

一、成功CSS3有限循环动画代码示例。

代码如下：

@-webkit-keyframes gogogo {

-webkit-transform: rotate(0deg);

border:5px solid red;

-webkit-transform: rotate(180deg);

background:black;

border:5px solid yellow;

-webkit-transform: rotate(360deg);

background:white;

border:5px solid red;

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

规则能否应该轮番反向播放动画。