css3 Animation属性
css3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步,实现复杂的动画效果。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
css3Animation属性详解
属性 | 描述 | 参数 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | |
animation-name | 指定 @keyframes 动画的名称。 | 动画名称自己起,与@keyframes规则名称相对应 |
animation-duration | 指定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 数值n |
animation-timing-function | 指定动画的速度曲线。默认是 "ease"。 | linear:动画从头到尾的速度是相同的。 ease:动画以低速开始,然后加快,在结束前变慢。 ease-in:动画以低速开始。 ease-out:动画以低速结束。 ease-in-out:动画以低速开始和结束。 cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
animation-fill-mode | 指定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 | none:动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards:应用最后关键帧的样式 backwards:应用初始帧的样式 both:动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
|
animation-delay | 指定动画何时开始。默认是 0。 | 数值n |
animation-iteration-count | 指定动画被播放的次数。默认是 1。 | 数值n: 一个数字,定义应该播放多少次动画 infinite:指定动画应该播放无限次 |
animation-direction | 指定动画是否在下一周期逆向地播放。默认是 "normal"。 | normal:动画按正常播放。 reverse:动画反向播放。 alternate:动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 alternate-reverse:动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 |
animation-play-state | 指定动画是否正在运行或暂停。默认是 "running"。 | paused:暂停动画 running:运行动画 |
利用Animation属性实现一个简单的幻灯片切换效果
原理是通过animate的关键帧来切换元素的背景图片即可达到幻灯片切换效果
<body>
<div class="banner">
</div>
</body>
.banner {
width: 480px;
height: 320px;
margin: 150px auto;
overflow: hidden;
background-size: cover;
background-position: center;
animation-name: "banner"; // 动画名称
animation-duration: 20s; // 播放动画所需时间
animation-timing-function: linear; // 播放动画的速度
animation-iteration-count: infinite; // 动画播放次数
}
@-webkit-keyframes 'banner' {
0% {background: url('images/1.jpg') no-repeat;}
25% {background: url('images/2.jpg') no-repeat;}
50% {background: url('images/3.jpg') no-repeat;}
75% {background: url('images/4.jpg') no-repeat;}
100% {background: url('images/5.jpg') no-repeat;}
}
文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料