CSS3动画
Posted yuh_c
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3动画相关的知识,希望对你有一定的参考价值。
Keyframes介绍Keyframes
被称为
关键帧
,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“…”,括号中就是一些不同时间段样式规则。
举例: @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;
animation-name动画名称 属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。 注意:需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀,Firefox加上-moz-。
animation-duration设置动画播放时间
主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。单位:S秒
语法规则
animation-duration: <time>[,<time>]*举例: 制作一个矩形变成圆形的动画,整个动画播放时间持续了10s钟
@keyframes toradius from border-radius: 0; to border-radius: 100%; div width: 200px; height: 200px; line-height: 200px; text-align: center; color: #fff; background: green; margin: 20px auto; div:hover animation-name: toradius; /*动画名称*/ animation-duration: 10s; /*动画播放时间*/
animation-timing-function: ease-in-out; animation-delay: .1s;
animation-timing-function设置动画播放方式
animation-delay设置动画开始播放的时间主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。
语法规则:
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>)]*
animation-iteration-count设置动画播放次数属性用来定义动画开始播放的时间,用来触发动画播放的时间点。和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间。
语法规则:
animation-delay:<time>[,<time>]*
属性主要用来定义动画的播放次数。
语法规则:
animation-iteration-count: infinite | <number> [, infinite | <number>]*
animation-direction 设置动画播放方向
animation-play-state设置动画的播放状态属性主要用来设置动画播放方向,其语法规则如下:
animation-direction:normal | alternate [, normal | alternate]*1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;
2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
属性主要用来控制元素动画的播放状态。
参数:
其主要有两个值:running和paused。
其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。
例如,页面加载时,动画不播放。代码如下:
animation-play-state:paused;
以上是关于CSS3动画的主要内容,如果未能解决你的问题,请参考以下文章