css3 annimation - 动画
2013-11-27 15:30
260 查看
自从css3面市以来,广受大家关注,也慢慢地被大家普及,工作中很多时候如果不考虑ie的情况下,我相信现在大家很多能用css3写的效果基本已经放弃了用js去写了。
那今天带大家认识一下animation属性,它可以帮助我们去实现一些简单的动画。例如点击一个元素,出现一个由小变大的框等网页常见效果都可以用animation去实现这个放大的动画效果。
如果有对transition有了解的同学,理解animation可能会更容易一些,因为transition的属性animation都有。
接下来让我们一起学习animation属性:
通常我们通过@keyframe 属性去创建动画方法:
语法:
这就好比我们在写js函数的时候写了一个funciton,之后再利用animation去调用这个方法。
接下来我们就认识一下animation,看一下怎么去调用一个动画方法:
语法:
默认值:以每个单独属性的默认值为准
取值:
脚本特性(js):animation。
同样,animation是复合属性,默认值还得看每个具体属性的默认值。
注明一下,简单的一个动画中需要这样的一组参数:
其中包含:动画名称(keyframe声明的名)、动画时长、动画类型、延时、重复、循环中反向运动这些可选项。
同样如果你不设定某些值例如延、重复、循环中反向运动等 这些都会按默认值去执行。
我们在给一个元素添加动画时可以同时添加几个动画,每组动画之间用 “,” 隔开。
如果提供多个属性值,以逗号进行分隔。
语法:
[b]默认值:none[/b]
取值:
脚本特性:[b]animationName[/b]
语法:
[b]默认值:0[/b]
取值:
脚本特性:animationDuration
语法:
默认值:ease
取值:
脚本特性:animationTimingFunction
语法:
默认值:0
取值:
脚本特性:animationDelay
语法:
默认值:1
取值:
脚本特性:animationIterationCount
语法:
默认值:normal
取值:
脚本特性:animationDirection
实例:
参考资料:W3CHTML
那今天带大家认识一下animation属性,它可以帮助我们去实现一些简单的动画。例如点击一个元素,出现一个由小变大的框等网页常见效果都可以用animation去实现这个放大的动画效果。
如果有对transition有了解的同学,理解animation可能会更容易一些,因为transition的属性animation都有。
接下来让我们一起学习animation属性:
动画方法@keyframe
首先,如果想要用动画必须先创建一个动画的具体方法,简称动画方法。通常我们通过@keyframe 属性去创建动画方法:
语法:
@keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } }
这就好比我们在写js函数的时候写了一个funciton,之后再利用animation去调用这个方法。
接下来我们就认识一下animation,看一下怎么去调用一个动画方法:
animation
属性:设置对象所应用的动画特效语法:
animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*
默认值:以每个单独属性的默认值为准
取值:
[ animation-name ]: 检索或设置对象所应用的动画名称 [ animation-duration ]: 检索或设置对象动画的持续时间 [ animation-timing-function ]: 检索或设置对象动画的过渡类型 [ animation-delay ]: 检索或设置对象动画延迟的时间 [ animation-iteration-count ]: 检索或设置对象动画的循环次数 [ animation-direction ]: 检索或设置对象动画在循环中是否反向运动
脚本特性(js):animation。
同样,animation是复合属性,默认值还得看每个具体属性的默认值。
注明一下,简单的一个动画中需要这样的一组参数:
animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
其中包含:动画名称(keyframe声明的名)、动画时长、动画类型、延时、重复、循环中反向运动这些可选项。
同样如果你不设定某些值例如延、重复、循环中反向运动等 这些都会按默认值去执行。
我们在给一个元素添加动画时可以同时添加几个动画,每组动画之间用 “,” 隔开。
animation-name
属性:[b]设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义[/b]如果提供多个属性值,以逗号进行分隔。
语法:
animation-name:none | <identifier> [ , none | <identifier> ]*
[b]默认值:none[/b]
取值:
none: 不引用任何动画名称 <identifier>: 定义一个或多个动画名称(identifier标识)
脚本特性:[b]animationName[/b]
animation-duration
属性:[b]设置对象动画的持续时间[/b]语法:
animation-duration:<time> [ , <time> ]*
[b]默认值:0[/b]
取值:
<time>: 指定对象动画的持续时间
脚本特性:animationDuration
animation-timing-function
属性:[b]设置对象动画的过渡类型[/b]语法:
animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [ , linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*
默认值:ease
取值:
linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(<number>, <number>, <number>, <number>): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
脚本特性:animationTimingFunction
animation-delay
属性:[b]设置对象动画的延迟时间 // 简译多久以后执行这个动画[/b]语法:
animation-delay:<time> [ , <time> ]*
默认值:0
取值:
<time>: 指定对象动画延迟的时间
脚本特性:animationDelay
animation-iteration-count
属性:[b]设置对象动画的循环次数[/b]语法:
animation-iteration-count:infinite | <number> [ , infinite | <number> ]*
默认值:1
取值:
infinite: 无限循环 <number>: 指定对象动画的具体循环次数
脚本特性:animationIterationCount
animation-direction
属性:[b]设置对象动画在循环中是否反向运动[/b]语法:
animation-direction:normal | alternate [ , normal | alternate ]*
默认值:normal
取值:
normal: 正常方向 alternate: 正常与反向交替
脚本特性:animationDirection
实例:
.outer{ width:200px; height:200px; position:relative;margin:100px auto; -webkit-transform-style:preserve-3d; -webkit-animation:roll 3s linear 1s infinite alternate; } /* animation */ @-webkit-keyframes roll{ from {-webkit-transform:rotatey(0deg);} to {-webkit-transform:rotatey(360deg);} }
参考资料:W3CHTML
相关文章推荐
- 纯CSS3制作皮卡丘动画壁纸
- 利用CSS3在Angular中实现动画
- 纯CSS3实现超酷炫的萤火虫动画
- css3 动画中display none
- 全屏滚动插件fullpage.js的回调函数,css3动画
- css3动画简介以及动画库animate.css的使用
- css3自定义上下循环动画-css3高斯模糊
- animate旋转动画练习,css3形变练习
- 支持IE8的纯css3开发的响应式设计动画菜单教程
- CSS3用transition实现边框动画效果
- 用css3制作旋转加载动画的几种方法
- css3 animation(动画)笔记
- CSS3简单动画效果与使用列表制作菜单
- css3新属性:过渡transition,变换transform(2D,3D),动画animation
- 用CSS3创建动画价格表
- CSS3 animation--圆圈刷新动画
- 利用CSS3制作淡入淡出动画效果
- CSS3 动画 cheatsheet
- css3动画的使用(@keyframes)