css3，transition，animation两种动画实现区别

我们为页面设置动画时，往往会用到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:before, .animation:after{

content:'';

width: 50%;

height: 100%;

animation: mymove 3s ease-in-out alternate infinite; -moz-animation: mymove 3s ease-in-out alternate infinite; -webkit-animation: mymove 3s ease-in-out alternate infinite; -o-animation: mymove 3s ease-in-out alternate infinite;

}

@keyframes mymove {

from { width: 50%; }

to { width: 0%; }

}

这里就不贴出keyframes浏览器适配了。

同时还可以这样想，transition是从：hover延伸出来的，不管是动态设置的还是非动态设置的过渡效果，只要过渡效果指定的属性值发生了变化就会触发过渡效果。

而animation是从flash延伸出来的，使用关键帧的概念，如果是非动态设置的，那么页面加载完后就会触发动画效果；如果是动态设置的，那么设置完后（假设没有设置 delay）就会触发动画效果。后面再改变属性值也不会触发动画效果了，除了一种情况（这种情况不会触发transition定义的过渡效果），就是元素从 display:none 状态变成非 display:none 状态时，也会触发动画效果。

极端条件下，animation占用的资源相应的比transition多，所以如果能用transition实现，就尽量用transition来实现，如果追求复杂更自由的动画，就可以用animation。

作者：Yhong_
链接：https://www.jianshu.com/p/3befa0f2fa02
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。