解密Animate.css之CSS3动画实现方式大全源码（6星级）

最新推荐文章于 2025-04-09 09:00:00 发布

转载最新推荐文章于 2025-04-09 09:00:00 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/20651

本文介绍了一种使用CSS3实现的摇摆动画效果。通过关键帧定义动画过程，使页面元素产生左右摇摆的动作。该动画适用于网页设计中增加互动性和趣味性的场景。

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

这里写图片描述

摇摆效果：http://www.100sucai.com/css3/3.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>摇摆</title>
<style>
.div {
    width:300px;
    height:200px;
    margin:100px auto;
    background:url(http://www.100sucai.com/img/demo/1373.png)
}
#animation {
-webkit-animation:shake 1s .2s ease both;
-moz-animation:shake 1s .2s ease both;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform:translateX(10px);
}
}
@-moz-keyframes shake {
0%, 100% {
-moz-transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-moz-transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
-moz-transform:translateX(10px);
}
}
</style>
</head>
<body>
<div id="animation" class="div"></div>
</body>
</html>