css3动画

早期在web中要实现动画效果，都是依赖于JavaScript或flash来完成，但在css3中新增加了一个新的模块transition，它可以通过一些简单的css事件来触发元素的外观变化，让效果显得更加细腻。简单来说，就是通过鼠标的单击、获得焦点、被点击、或对元素任何改变中触发，并平滑地以动画效果改变css属性值


在css中创建简单的过渡效果可以从以下几个步骤来实现
（1）在默认样式中声明元素的初始状态样式
（2）声明过渡元素最终状态样式，比如悬浮状态
（3）在默认样式中通过添加过渡函数，添加一些不同的样式
1 css变形属性
transform指一组转换函数，transform-origin属性指定元素的中心点在哪，新增加了第三个数transform-origin-z控制元素三维空间的中心点。transform-style的值设置为preserve-3d，建立一个3D渲染环境
transform属性的基本语法如下：
transform:none|[transform-function]|transform-function]....
可用于内联元素和块元素。其默认值为none，表示元素不进行变形。另一个属性值时一系列的变形函数，表示一个或多个变形函数，以空格分开；表示同时对一个元素进行变形的多种属性操作，例如rotate、scale、translate等
translate(): 移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数 translateX()和translateY();
scale():缩小或方法元素，可以使用元素尺寸发生变化，在此基础上用两个扩展函数 scaleX()和scaleY();
rotate(): 旋转元素，其参数值为旋转的角度值（360deg）
skwe();让元素倾斜。在此基础上有两个扩展函数skewX()和skewY()
matrix():定义矩阵变形，基于X轴和Y轴


transform-origin属性可以指定元素的中心点位置。默认情况下，变形 的原点在元素的中心点，或者是元素X轴和Y轴的50%处，transform-origin的语法格式如下：


transform-origin：[percentage | length |  left | center | right | top | bottom] | 


需要注意的是transform可以只设置一个值 也可以设置两个值 和三个值


transform-style属性是3D空间 的一个重要属性，指定嵌套元素如何在3D空间中呈现 主要有两个属性值，flat和preserve-3D


2 过渡属性transition
css3的transition功能很简单：css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变css的属性值
css3过渡与元素上的常规样式一起声明。只要目标属性更改，浏览器就会应用过渡。除了使用JavaScript触发动作外，在css中也可以通过一些伪类来触发，如:hover、:focus、:active、:target和:checked等。
以下是使用css创建爱你简单过渡的步骤：
（1）在默认样式中声明元素的初始状态样式
（2）声明过渡元素最终样式，比如悬浮状态
（3）在默认样式中通过添加过渡函数，添加一些不同的样式。


css过渡属性
过渡属性是一个复合属性，主要包括以下几个属性
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
（1）transition-property属性
transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果。
如要改变元素的宽度属性，可将transition-property的属性设置为width