一、transform 和@keyframes动画的区别：
@keyframes动画是循环的，而transform 只执行一遍.
二、@keyframesCSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。
@keyframes 它定义的动画并不直接执行，需要借助animation 来运转。
在动画过程中，可以多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
百分比是指动画完成一遍的时间长度的的百分比 ，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。应该始终定义0%和100%来获得最佳的动画效果。
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
标签：动画,百分比,keyframes,animation,0%,css From： https://www.cnblogs.com/Esai-Z/p/17408240.html