css3 @keyframe 抖动/变色动画

最新推荐文章于 2025-05-03 22:33:57 发布

转载最新推荐文章于 2025-05-03 22:33:57 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jlliu/p/5319202.html

本文介绍了使用CSS和JavaScript实现元素动画效果的方法，包括通过关键帧动画和定时器触发颜色变化，展示了两种不同技术实现动画的基本步骤和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.纯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:

css:

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

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)