CSS3中设置动画播放时间
03/23
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒
语法规则
animation-duration: <time>[,<time>]*
取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）
例如：让元素从红色变化到绿色，整个变化过程持续5s时间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style>
@keyframes changeColor {
from {
background: red;
}
to {
background:green;
}
}
div {
width: 200px;
height: 200px;
background: red;
text-align:center;
margin: 20px auto;
line-height: 200px;
color: #fff;
}
div:hover {
animation-name: changeColor;
-webkit-animation-duratuib: 3s;
-moz-animation-duration:3s;
animatino-duration:3s;
animation-timing-function: ease-out;
animation-delay: .1s;
}
</style>
</head>
<body>
<div>Hover Me</div>
</body>
</html>效果如图所示：
版权属于：
Dcr163的博客
本文链接：
https://www.dcr163.cn/148.html（转载时请注明本文出处及文章链接）
