css3动画过渡

动画过渡

过渡

代码   
    body里面只有一个div  
    style里面代码如下:

    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    div:hover{
        //transform: rotate(60deg);
        //transform: scale(5,5);
        //transform: translate(200px,200px);
        background-color: blue;
        transition: background-color 1s linear 2s;
    }

transition: background-color 1s linear 2s;
参数分别是:设置的过渡属性 执行时间 速度函数 延迟时间（不写默认不延迟）

动画

代码  
body里面只有一个div  
style里面代码如下:  
  div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        animation: flash 1s linear  3 normal;
    }  

        @keyframes flash {
     /*   100%{
            transform: rotate(60deg);
        }*/
        10%{
            transform: translate(20px,2px);
            background-color: red;
        }
        50%{
            background-color: blue;
            transform: translate(50px,50px);
        }
           100%{
               background-color: yellow;
           transform: translate(200px,200px);
       }
    }

animation: flash 1s linear 2s 3 normal;
参数分别是:动画名称 执行时间 动画函数 延迟时间 执行次数（infinite无限次播放） 动画播放方式：normal/alternate(偶数次逆序播放)

比较

过渡需要触发一个事件（比如hover/onmouseover）  
动画不需要事件触发，直接执行  

在jQuery中使用过渡动画

使用过渡主要代码：
 $('.box').css({'transform':'rotate(45deg)','transition':'transform 0.4s linear'});  
使用动画主要代码：  
$('.box').animate('animation','flash 3s ease 1 normal')    前提需要在style中写好自定义的动画flash