我们为页面设置动画时，往往会用到transition还有animation以及transfrom属性或者用到js。
其实通常情况下，对于使用js我们更加倾向于使用css来设置动画。
transfrom就不用说了，它本身就一个css属性。
transition 是可以为一个或者多个用数值表示的CSS属性发生变化时添加动画效果。
.demo{
overflow: hidden;
100px;
height: 100px;
position: relative;
}
.aaa{ 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:'';
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 { 50%; }
to { 0%; }
}
这里就不贴出keyframes浏览器适配了。
同时还可以这样想，transition是从：hover延伸出来的，不管是动态设置的还是非动态设置的过渡效果，只要过渡效果指定的属性值发生了变化就会触发过渡效果。
而animation是从flash延伸出来的，使用关键帧的概念，如果是非动态设置的，那么页面加载完后就会触发动画效果；如果是动态设置的，那么设置完后（假设没有设置 delay）就会触发动画效果。后面再改变属性值也不会触发动画效果了，除了一种情况（这种情况不会触发transition定义的过渡效果），就是元素从 display:none 状态变成非 display:none 状态时，也会触发动画效果。
极端条件下，animation占用的资源相应的比transition多，所以如果能用transition实现，就尽量用transition来实现，如果追求复杂更自由的动画，就可以用animation。
作者：Yhong_
链接：https://www.jianshu.com/p/3befa0f2fa02
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。