前端动画实现一——css3的animation、transition和transform

1.animation：哪个动画，动画过程 @keyframes

1. 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
2. 针对的是一套样式整体，transition是针对某些属性所有变化。

.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);
    }
}

2.transition: 属性变化的过渡过程，直接针对某个或某些属性，只要这个属性有变化，就加上这种过渡效果

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, 
        background-color 2s, -webk