css3 @keyframes、transform详解与实例

一、transform 和@keyframes动画的区别：

　　　　@keyframes动画是循环的，而transform 只执行一遍.

二、@keyframes

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

• 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

• 通过 @keyframes 规则，您能够创建动画。

• @keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

• @keyframes 它定义的动画并不直接执行，需要借助animation来运转。

• 在动画过程中，您能够多次改变这套 CSS 样式。

• 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

　　语法:  @keyframes animationname {keyframes-selector {css-styles;}}

　　例一:

.load-border {width: 120px;height: 120px;background: url(../images/loading_icon.png) no-repeat center center;-webkit-animation: gif 1.4s infinite linear;animation: gif 1.4s infinite linear; 
}
@keyframes gif {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}