html动画效果效果图,css3-动画（animation）效果的实现

本章给大家介绍css3-动画(animation)效果的实现，让大家了解一个简单的css3动画是如何实现的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css3-动画(animation)：

具有以下属性：

1、animation-name 自定义动画名称

2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;

3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢 。

4、animation-delay 动画在启动前的延迟间隔，默认是0

5、animation-iteration-count 动画的播放次数，默认是1

6、animation-direction 是否轮流反向播放动画

7、animation-play-state 动画是否正在运行或已暂停。 值：paused 指定暂停动画 ； running 指定正在运行的动画，默认。

代码实例(以平移--translate为例说明动画的整个过程)：

.warp {

height: 100px;

width: 100px;

border: 1px solid #eee;

background-color: #21B4BB;

animation-name: moves;

animation-direction: alternate;

animation-delay: 0.2s;

animation-duration: 5s;

animation-play-state: paused;

animation-iteration-count: 3;

/*以上可以简写成：*/

animation: moves 5s linear 0.2s 3;

}

@keyframes moves {

/*动画名称自定义*/

10% {

background-color: #21B4BB;

/*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/

transform: translate(100px, 0);

-ms-transform: translate(100px, 0);

/*IE 9*/

-moz-transform: translate(100px, 0);

/* Firefox */

-webkit-transform: translate(100px, 0);

/* Safari 和 Chrome */

-o-transform: translate(100px, 0);

/* Opera */

}

30% {

background-color: #008000;

/*时间点可以任意*/

transform: translate(100px, 100px);

-ms-transform: translate(100px, 100px);

/*IE 9*/

-moz-transform: translate(100px, 100px);

/* Firefox */

-webkit-transform: translate(100px, 100px);

/* Safari 和 Chrome */

-o-transform: translate(100px, 100px);

/* Opera */

}

60% {

background-color: #444444;

/*时间点可以任意*/

transform: translate(0, 100px);

-ms-transform: translate(0, 100px);

/*IE 9*/

-moz-transform: translate(0, 100px);

/* Firefox */

-webkit-transform: translate(0, 100px);

/* Safari 和 Chrome */

-o-transform: translate(0, 100px);

/* Opera */

}

100% {

background-color: #70DBDB;

/*时间点可以任意*/

transform: translate(0, 0);

-ms-transform: translate(0, 0);

/*IE 9*/

-moz-transform: translate(0, 0);

/* Firefox */

-webkit-transform: translate(0, 0);

/* Safari 和 Chrome */

-o-transform: translate(0, 0);

/* Opera */

}

}

效果图：