CSS3动画

                                CSS3动画

开发工具与关键技术：DW 前端

作者：盘子·

撰写时间：2019年1月17日

用JavaScript来实现动画效果有时需要敲打很多代码，而且费事又费时。而现在用CSS3就可以实现JavaScript所能实现的效果，简单易懂。下面的例子就是纯CSS实现的，源代码部分也是非常简明，见下面截图：

在截图中我们可以看到HTML部分只是用一个ul标签再给它一个类名，在里面放置了li,a,img标签。

在css样式部分则使用了css3动画实现效果中的transition过渡属性与transform变形属性。Css部分的截图如下：

Css3的transform变形功能可以实现位移、旋转、缩放、倾斜四种变换，transition动画执行

动画播放时间。下面是css3的属性简释：（含红色字体引用于师兄师姐的整理资料）

CSS3动画----transform变形

transform：该属性用于设置变形，该属性支持一个或多个变形函数。

rotate(angle):该函数用于设置元素旋转的度数.

例如：transform：rotate(30deg);

skew(sx,yx):该函数用于设置元素的一个扭曲效果。

例如：transform:skew(10deg,20deg);

scale(sx,xy):该函数用于设置元素的缩放效果。

translate(tx,ty):该函数用于设置元素的位移。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。

ease-in:动画开始的速度较慢，然后速度加快。

ease-out:动画开始的速度很快，然后速度减慢。

ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

transition-delay:指定开始出现的延迟时间

其中还使用到了伪类，见截图：

伪类跟类相似，但并没有实际的类附加到标记，相当于一层虚拟遮罩层。伪类又可以分为UI伪类和结构化伪类两种。见截图中的hover就属于UI伪类中的一种，hover伪类是处于鼠标悬停状态的元素，如：截图中的

Photoes a
img:hover{

Transform:scale(0.5);

}<当鼠标移动到img图片上时，图片缩小>

再如：

a :hover{

text-decoration:none;

}<当鼠标移动到a标签上时，下划线消失>

这个小案例使用过渡transition属性与变形transform属性以及hover伪类三个结合，当鼠标移动到图片上时，动画状态发生改变。见下面截图：