css3 @keyframe 抖动/变色动画

一.纯css实现

.shake{    //抖动的元素
    width: 200px;
    height: 100px;
    margin: 50px auto;
    background: #f00;
    position: relative;
}

/**step 2**/
@-webkit-keyframes shake{
    0%{
        -webkit-transform:translateX(10px) rotate(10deg);
    }
    20%{
        -webkit-transform:translateX(-7px) rotate(-7deg);
    }
    40%{
         -webkit-transform:translateX(5px) rotate(6deg);
    }
    60%{
        -webkit-transform:translateX(-3px) rotate(-3deg);
    }
    80%{
        -webkit-transform:translateX(6px) rotate(5deg);
    }
   100%{
       -webkit-transform:translateX(-10px) rotate(-10deg);
    }
}

/**step 3**/
.shake:hover{
    -webkit-animation-name: shake;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
}

 

二.js实现变色动画

html:

<div id='a' style="width:200px; height:200px; margin:0 auto;"></div>

css:

div.a {
    animation: myfirst 1s;
    -webkit-animation: myfirst 1s;
}

<style id="dynamic">
</style>

js:

var colors = ['red','yellow','blue','green']

window.setTimeout(function (){   //每隔一秒，取数组中的颜色值，作为div.a的背景动画颜色，再消除颜色动画（既消除背景色）
    var color = colors.shift();
    console.log(color);
    if (!color) return

    var style = document.getElementById("dynamic");   //给style页内标签加入keyframes动画

    style.innerHTML = '@-webkit-keyframes myfirst{50% {background: '+color+';} }\n'+ '@keyframes myfirst {50% {background: '+color+';}}'

    var a = document.getElementById('a')

    a.className = 'a'

    window.setTimeout(function(){
        a.className = ''
    },1000)

    window.setTimeout(arguments.callee,1500);

 

},1000)