css3 实现动画效果,怎样使他无限循环动下去?

html-css036

css3 实现动画效果,怎样使他无限循环动下去?,第1张

一、实现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

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

1、首先新建一个html空白文档,取名字叫做css3动画,保存一下。

2、然后写html结构,只需要一个div元素即可,class名字叫做img

3、设置其边框为不同的颜色,边框宽度设置成100px。

4、因为是圆环,所以我们用到了css3的圆角效果,设置圆角为50%,也就是border-radius:50%,看一下效果。

5、接下来就是关键的步骤了,也就是添加动画效果。输入以下代码

6、来看一下最后的效果,还是不错的。

要创建 CSS3 动画,你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。