共计 1638 个字符，预计需要花费 5 分钟才能阅读完成。
作用：
css3 动画属性
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
默认：none 0 ease 0 1 normal
搭配 @keyframes animation-name{} 应用
- animation-name，规定须要绑定到选择器的 keyframe 名称
- animation-duration，规定实现动画所破费的工夫，以秒或毫秒计
- animation-timing-function，规定动画的速度曲线
- animation-delay：规定在动画开始之前的提早
- animation-iteration-count，规定动画应该播放的次数
- animation-direction，规定是否应该轮流反向播放动画
实例：动画与设定实现工夫
语法
animation-name: keyframename | none;
animation-duration: time;
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画实现工夫 */
animation-duration: 5s;
}
@keyframes mymove {from { left: 0;}
to {left: 200px;}
}
</style>
<body>
<h1> 实现动画与设定实现工夫 <h1>
<div></div>
</body>
实例：动画开始工夫（提早开始工夫）
语法
animation-delay: time;
留神：容许负值，-2s 使动画马上开始，但跳过 2 秒进入动画周期
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画实现工夫 */
animation-duration: 5s;
/* 动画开始工夫 */
animation-delay: 2s;
}
@keyframes mymove {from { left: 0;}
to {left: 200px;}
}
</style>
<body>
<h1> 实现动画开始工夫（提早开始工夫）<h1>
<div></div>
</body>实例：动画播放次数
语法
animation-iteration-count: n | infinite;
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画实现工夫 */
animation-duration: 5s;
/* 动画播放次数 */
animation-iteration-count: 2;
}
@keyframes mymove {from { left: 0;}
to {left: 200px;}
}
</style>
<body>
<h1> 实现动画播放次数 <h1>
<div></div>
</body>实例：动画播放次数
语法
animation-iteration-count: n | infinite;
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画实现工夫 */
animation-duration: 5s;
/* 动画播放次数 */
animation-iteration-count: 2;
}
@keyframes mymove {from { left: 0;}
to {left: 200px;}
}
</style>
<body>
<h1> 实现动画播放次数 <h1>
<div></div>
</body>
正文完
