css3笔记——2D动画

css动画中主要包括变形、转换和动画,有2D和3D两部分,首先是2D的动画部分。

一、css变形Transformation

W3C中有2D变形和3D变形的的草案中定义了变形属性值有none和transform-function,transform-function包括:

  • matrix():定义了矩阵变换,即基于X和Y坐标重新定位元素的位置(较为复杂,其使用在次暂不探讨,可点此查看详情)。
  • translate():移动元素,基于X和Y坐标重新定位元素,值应该为两个,第一个表示水平方向,为正数时基于右边框向右移动,第二个值表示垂直方向,当为正数时基于上边框向下移动。若只有一个值的情况下表示水平移动。
  • scale():缩放元素对象,可以使任意元素对象尺寸发生变化,取值包括正数和负数(首先反转元素在缩放元素),以及小数(使用小于1的小数来缩小元素),值应该为两个,第一个代表宽,第二个代表高,若只有一个值则表示两者相等。
  • rote():旋转元素对象,取值为一个度数值,随着值的增大元素顺时针旋转。
  • skew():倾斜元素对象,取值为度数值。值有两个,第一个表示下对于X轴进行倾斜,第二个表示相对于Y轴倾斜,当值为一个的时候表示基于X轴倾斜。

二、css3变形原点transform-origin

css中默认的变形原点为元素的中心,transform-origin接受两个值,可以为百分值、em、px等,也可以left、center、right和top、middle、bottom的关键字。

三、css3过度——transition

css变形定义动画的结果,而transition则定义了动画过程过渡的效果,transition和background一样属于混合属性,而且也一般混合使用,其子属性有:

  • transition-property:定义需要过渡的css属性,值有: - none:表示不使用过渡属性。
  • all:针对所有元素。
  • IDENT:指定css属性列表
  • transition-duration:定义动画过渡的时间,也就是动画持续的时间,单位为s活着ms(毫秒),默认为0秒,即无需过渡。
  • transition-delay:定义动画的延迟时间,可以为正整数、负整数、零。为负时,过渡的动画在此开始显示,之前的动作被截断。默认为零。
  • transition-timing-function:定义过渡动画的效果 - ease:默认值,较为平滑缓动的效果等同于cubic-bezier(0.25,0.1,0.25,1.0)。
  • linear:线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)。
  • ease-in:先快后慢,等同于cubic-bezier(0.42,0.0,1.0,1.0)。
  • ease-out:先慢后快,等同于cubic-bezier(0.0,0.0,0.58,1)。
  • ease-in-out:动画过程中快慢切换的过程,等同于cubic-bezier(0.42,0.1,0.48,1)。
  • 最后就是直接定义贝塞尔曲线,贝塞尔曲线有点类似于ps、ai中的钢笔工具中曲线变换的的形式,具体到css中动画过渡效果,腾讯alloyteam有很好的展示,可以学习也可更方便的使用。

四、css动画——animation属性

css3规范的css动画模块,定义了css动画的基本实现方式,通过animation属性可以创造出很炫的动画效果,Animate.css上展示了一些很有用的效果,可以学习查看。

animation是个混合属性,包含有:

  • animation-name:定义动画的名称。
  • animation-duration:定义动画持续时间。
  • animation-timing-function:定义动画的展示方式,值和transition-timing-function一样。
  • animation-delay:定义动画延迟时间。
  • animation-iteration-count:定义动画的播放次数,支持数字(非整数,导致动画结束在一个周期的某个部分,若为负值动画反向播放)和关键词infinite(无限次)
  • animation-direction:定义动画的播放方向,默认为normal,另一个值为alternate,表示偶数次向前播放,奇数次向后播放。

刚才alloyteam中有个心跳灯的动画,自己很是喜欢,可以点此查看,自己也留了个备份(在此可以直接查看css动画代码)的。
—————每篇一图—————-

[![Last-light](http://hicdn.qiniudn.com/wp-content/uploads/2012/12/Last-light.jpg "Last-light")](http://hicdn.qiniudn.com/wp-content/uploads/2012/12/Last-light.jpg)Last-light

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus