css3 animation-duration属性笔记

原创 PHP笔记  2017-09-17 18:31  阅读 1,057 views 次

在css中,animation-duration属性是用来设置动画完成一个周期需要多少时间(单位:秒或毫秒)。如果不设置该属性或设置为0,目标将不会运动。

语法格式:

animation-duration: 时间;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation-duration属性笔记</title>
<style>
#ad
{
width:300px;
height:100px;
background:red;
position:relative;
animation:mymove infinite;
animation-duration:3s;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
</style>
<head/>
<body>
<div id="ad"></div>
</body>
</html>

运行结果:

注意:animation-duration属性不兼容Internet Explorer 9以及更早版本的浏览器

动画简写属性——>css3 animation动画属性笔记

本文地址:https://www.ggbiji.com/css-animation-duration.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情