html 设置动画时间,CSS3中设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法规则

animation-duration: [,]*

取值为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果(如果值为负值会被视为“0”)。

案例演示：

制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。

HTML:

Hover Me

CSS:

@keyframes toradius{

from {

border-radius: 0;

}

to {

border-radius: 100%;

}

}

div {

width: 200px;

height: 200px;

line-height: 200px;

text-align: center;

color: #fff;

background: green;

margin: 20px auto;

}

div:hover {

animation-name: toradius;

animation-duration: 10s;

animation-timing-function: ease-in-out;

animation-delay: .1s;

}

鼠标移入

鼠标移出