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