我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js。
其实通常情况下,对于使用js我们更加倾向于使用css来设置动画。
transfrom就不用说了,它本身就一个css属性。
transition 是可以为一个或者多个用数值表示的CSS属性发生变化时添加动画效果。
.demo{
overflow: hidden;
width: 100px;
height: 100px;
position: relative;
}
.aaa{ width: 100%; height: 50px;
position: absolute; bottom: -50px; opacity: 0;
-webkit-transition: all 0.85s ease; -moz-transition: all 0.85s ease; -o-transition: all 0.85s ease; -ms-transition: all 0.85s ease; transition: all 0.85s ease; }
.demo:hover .aaa{
opacity: 1;
bottom: 0;
}
transition的属性有:
- transition-property(css属性name,transition效果)、
- transition-duration(动画持续多少秒)、
- transition-timing-function(动画的变化过程速度曲线)、
- transition-delay(动画开始的时候,也就是延迟多少秒)
相对于animation,transition从某种层度上讲,动画控制的更粗一些,它唯一能定义动画变化过程效果的便是transition-timing-function属性,
而animation提供的keyframe方法,可以让你手动去指定每个阶段的属性。此外animation还封装了循环次数,动画延迟,反向循环等功能,更加自由和强大。
animation :
name 设置动画的名称,
duration 设置动画完成的周期,
timing-function 设置动画的速度曲线,
delay 设置动画什么时候开始,
iteration-count 设置动画播放的次数,
direction 规定下一个周期是否逆向的播放,
play-state 动画是否正在进行或者暂停,
fill-mode 设置动画停了之后位置什么状态
transition :
property 去设置过渡效果的属性名称,
duration 设置过渡效果的周期,
timing-function 规定速度效果的速度曲线,
delay 设定过渡效果什么时候开始;
区别:
1、transition 是过渡,是样式值的变化的过程,只有开始和结束;animation 其实也叫关键帧,通过和 keyframe 结合可以设置中间帧的一个状态;
2、animation 配合 @keyframe 可以不触发时间就触发这个过程,而 transition 需要通过 hover 或者 js 事件来配合触发;
3、animation 可以设置很多的属性,比如循环次数,动画结束的状态等等,transition 只能触发一次;
4、animation 可以结合 keyframe 设置每一帧,但是 transition 只有两帧;
5、在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了;