在不使用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是通过定义多个关键帧来实现效果,随时间变化不需要触发。