css3实现动画效果常用方法

css3实现动画效果常用方法

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

在css中创建简单的过渡效果可以从以下几个步骤来实现：

（1）在默认样式中声明元素的初始状态样式

（2）声明过渡元素最终状态样式，比如悬浮状态

（3）在默认样式中通过添加过渡函数，添加一些不同的样式

1、css变形属性

transform属性的基本语法如下：

translate(): 移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY();

scale():缩小或方法元素，可以使用元素尺寸发生变化，在此基础上用两个扩展函数scaleX()和scaleY();

rotate(): 旋转元素，其参数值为旋转的角度值（360deg）

skwe();让元素倾斜。在此基础上有两个扩展函数skewX()和skewY()

matrix():定义矩阵变形，基于X轴和Y轴

2、过渡属性transition

过渡属性是一个复合属性，主要包括以下几个属性

transition-property:指定过渡或动态模拟的css属性（CSS属性名称）

transition-duration:指定完成过渡所需的时间（持续时间）

transition-timing-function:指定过渡函数（缓动函数）

transition-delay:指定开始出现的延迟时间（改变元素属性值后多长时间开始执行）

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

3、animation动画

animation-name属性主要用来调用@keyframes定义好的动画

animation-duration属性主要用来设置CSS3动画播放时间

animatino-timing-function属性主要用来设置动画播放方式

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点

animation-iteration-count属性主要用来定义动画的播放次数

animation-direction属性主要用来设置动画播放方向

animtion-play-state属性是用来控制元素动画的播放状态

animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果