css抖动基础

时间：2015-03-22 19:37:40 阅读：254 评论：0 收藏：0 [点我收藏+]

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<tilte>Document</title>
<style>
@-webkit-keyframes buzz-out{
0%{
-webkit-transform:translateX(10px)rotate(20deg);
}
30%{
-webkit-transform:tranalateX(-10px)rotate(-20deg);

}
60%{
-webkit-transform:translateX(30px)rotate(50deg);
}
100%{
-webkit-transform:translateX(-30px)rotate(-50deg);
}
}
#buzz{
width:1000px;
height:400px;
margin:200px;
background:#eee1e1;
position:relative;
}
#buzz:hover {
-webkit-animation-name:buzz-out;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:100;
}

</style>
</head>
<body>
<div id="buzz">
<p></p>
</div>
</body>

</html>

技术分享

以上是代码。

有关属性：animation

animation-name:规定需要绑定到选择器keyframe名称

animation-duration:规定花费的时间以秒或毫秒记

animation-timing-fuction:规定动画速度曲线

animation-delay:规定开始之前的延迟

animation-iteration-count:规定动画应播放的次数

animation-direction:规定是否应该轮流反向播放动画

@-webkit-keyframes buzz-out{
0%{
-webkit-transform:translateX(10px)rotate(20deg);
}
30%{
-webkit-transform:tranalateX(-10px)rotate(-20deg);

}
60%{
-webkit-transform:translateX(30px)rotate(50deg);
}
100%{
-webkit-transform:translateX(-30px)rotate(-50deg);
}
}

这里可以设置抖动的幅度

css抖动基础

原文：http://blog.csdn.net/qq_24928451/article/details/44539349

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)