css3学习--css3动画详解一(animation属性)
2016-03-17 16:57
656 查看
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~
一.Keyframes介绍:
Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 示例:创建一个动画名叫“changecolor”,在“0%”时背景色为red,在20%时背景色为blue,在40%背景色为orange,在60%背景色为green,在80%时背景色yellow,在100%处时背景色为red。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3动画</title> <style> @keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: red; } } div { width: 300px; height: 200px; background: red; color:#fff; margin: 20px auto; } div:hover { animation: changecolor 5s ease-out .2s; } </style> </head> <body> <div>hover颜色改变</div> </body> </html>
[b]二.设置动画播放方式[/b]
语法规则:
animation-timing-function:ease(由快到慢,逐渐变慢) | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
[b]三.设置动画播放方向 [/b]
animation-direction属性主要用来设置动画播放方向,其语法规则如下:
animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值:normal、alternate
1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;
2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
四.设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态。参数:
其主要有两个值:running和paused。
其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。
例如,页面加载时,动画不播放。代码如下:
animation-play-state:paused;
五.设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下:属性值 | 效果 |
none | 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处 |
forwards | 表示动画在结束后继续应用最后的关键帧的位置 |
backwards | 会在向元素应用动画样式时迅速应用动画的初始帧 |
both | 元素动画同时具有forwards和backwards效果 |
例如:让动画停在最一帧处。代码如下:
animation-fill-mode:forwards;
相关文章推荐
- [转]CSS 那么多属性,而且每个属性都有多个值怎么记?
- CSS边距问题
- CSS设置属性
- CSS基础知识
- CSS所遇问题小
- html+css 清除浮动的相关技巧心得
- QTabWidget添加自定义样式
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
- CSS3参考文档
- css3多行文本溢出显示省略号(…)
- CSS裁剪clip
- CSS之可收缩的底部边框
- CSS之可收缩的底部边框
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
- css实现小三角(原理)
- js中巧用cssText属性批量操作样式(转)
- CSS布局——DIV水平居中和垂直居中
- CSS - 实现图片垂直居中,文字垂直居中
- CSS样式:position: absolute
- css布局--2016.3.17