前端之Html+Css实现动画的方法

在不使用JS、Canvas、gif等其他方式的情况下，前端实现动画的方式有Css3的transform属性、transition属性和animation属性三种方式。

1、transform属性

可以实现元素的形状、角度、位置等变化，如平移、旋转、缩放和倾斜效果。

变形函数：

rotate，以x/y/z轴进行旋转，默认为z轴；

transform:rotateX(45deg);  /*沿x轴旋转45°*/

skew，对元素进行倾斜扭曲；

transform:skewX(10deg);  /*对某元素沿x轴扭曲45°*/
transform:skew(10deg，40deg);  /*对某元素沿x轴,y轴做2D倾斜转换*/

scale，以x/y轴进行缩放；

transform:scale(3);  /*某元素扩大为原来的3倍*/

translate，相对于自身位置进行移动；

transform:translateX(100px);  /*向右平移100px*/
transform:translate3d(10px,20px,30px);/*3d空间进行变换*/

子属性：

transform-origin，用来指定元素的中心点位置；

transform-origin: left|right|center;   /*默认在元素中心*/

transform-style，定义元素在2D或3D空间呈现；

transform-style:flat|preserve-3d;  /*默认值flat，表示2d平面呈现*/

perspective，定义元素的距视图的距离，即观察的位置；(该属性只影响3d转换元素)

perspective: number|none; /*默认值为none，单位px*/

2、transition属性

其工作机制是为元素设置两套样式，在过渡属性未触发时是一种样式，出发后是另一种样式。

transition-property，规定设置过渡效果的css属性名称；

transition-property: none|all|property; /*默认值all，没有指定任何样式|支持元素所有样式|指定样式名称*/

transition-duration，设置元素过渡所需的时间；

transition-duration:10s; /*默认值为0，即时变化，没有过渡效果*/

控制过渡过程的函数有两个，transition-timing-funcion和step：

transition-timing-function，指定元素的过渡速度及过渡期间的操作情况，其值的类型有两种：单一类型的过渡函数、三次贝塞尔曲线；

transition-timing-function:____;

/*单一的过渡函数*/
linear，从开始到结束匀速过渡（等同于cubic-bezier(0,0,1,1)).
ease，默认值，慢速开始，然后变快，再慢速结束.
ease-in，越来越快，又称“渐显效果”.
ease-out，越来越慢，又称“渐隐效果”.
ease-in-out，先加速再减速，开始结尾都以慢速结束，又称“渐显渐隐效果”.

/*三次贝塞尔曲线*/
cubic-bezier(n,n,n,n)，可定义0~1之间的值.

step，将整个过渡时间划分为等距间隔，该函数还指定发生在开始或结束时的时间间隔是否另外输出，采用百分比的形式；

step(n,start|end);/*n为间隔时间，start为执行时保留下一帧状态，end为执行时保留当前帧的状态*/

transition-delay，控制当前元素属性值多长时间后开始执行过渡效果；

transition-delay:10s; /*过渡动作10s后触发；0表示立即触发。负数表示过渡元素的动作会从该时间点触发，之前的动作被截断*/

3、animation属性

animation动画创建的原理是通过设置关键帧的方式将一套CSS样式逐渐变化为另一套样式，只接受%为单位，但也可使用关键词from和to(表示0%和100%)。语法：                                                     @keyframes animationname{keyframes-selector{css-styles;}}

animation-name,用于调动通过@keyframes关键帧定义好的动画；

animation-name:keyframename|none;
/*keyframename需要与@keyframes中的animationname一致*/
/*none默认值，没有任何效果，可用于覆盖任何动画*/

animation-duration,定义整个动画完成的时间；

animation-duration:time;

animation-timing-function，设置动画的速度曲线；

animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cuubic-bezier|step-start|step-end|step(number,start/end);
/*参考transitioon-timing-function*/

animation-delay，定义动画开始前等待的时间，默认值为0，适用于所有块元素和行内元素；

animation-delay:time;

animation-iteration-count，定义动画播放的次数；

animation-iteration-count:n|infinite;
/*默认值为1，infinite指无限次数播放*/

animation-direction，指定元素动画的播放方向；

animation-direction:normal|alternate;
/*normal默认值，每次都循环向前播放*/
/*alternate播放次数为偶数时向前播放，为奇数则反向播放*/

animation-play-state，设置动画播放状态；

animation-play-state:paused|running;
/*paused暂停播放*/
/*running默认值，若使用running将暂停的动画重新播放，可能从头开始，也可能从暂停位置开始*/

animation-fill-mode，定义动画开始前和结束后的操作；

animation-fill-mode:none|forwards|backwards|both;
/*none默认值，结束后返回第一帧*/
/*forwards结束后继续应用最后一帧的位置*/
/*backwards向元素应用动画时应用初始位置*/
/*both具有forwards和backwards的效果*/

总结

1.transition的触发方式有三种：

①伪元素触发，鼠标指向时触发（:hover）、点击某个元素时触发（:active）、元素获得焦点状态时触发（:focus）、元素被选中时触发（:checked）。

②媒体查询触发，通过@media属性。

③JavaScript事件触发。

2.transition和animation的区别：

二者功能基本相同，但使用transition只能定义属性的开始与结束值，中间部分只能平滑过渡，且需要触发。animation是通过定义多个关键帧来实现效果，随时间变化不需要触发。