本文介绍了如何使用CSS3创建HTML元素的上下左右晃动动画效果。通过定义关键帧动画`@keyframes`，配合`animation`属性，可以实现元素的周期性晃动。示例中分别演示了向上晃动（`upAnimation`）和围绕中心晃动（`aroundAnimation`）两种效果，详细代码已给出。
.animated {
animation-duration: 2s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
}
.animated {
animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
.animated {
animation-duration: 2s; /*动画时间*/
}
.up,.around {
background: #2D97DB;
width: 90%;
height: 90%;
padding: 20px;
margin: 20px auto;
font-family: "微软雅黑";
font-size: 40px;
color: white;
text-align: center;
line-height: 90%;
}
.around{
background-color: #44a036;
}
.up{
animation-name:upAnimation; /*动画的名称*/
transform-origin: center bottom; /*设置动画旋转元素的基点为*/
cursor: pointer;
}
.around{
animation-name:aroundAnimation; /*动画的名称*/
transform-origin: center bottom; /*设置动画旋转元素的基点为*/
cursor: pointer;
}
@keyframes upAnimation{
0%,
100%,
20%,
50%,
80% {
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
transform: translate3d(0,0,0);
}
40%,
43%{
transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
transform: translate3d(0,-30px,0);
}
70%{
transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
transform: translate3d(0,-15px,0);
}
90%{
transform: translate3d(0,-4px,0);
}
}
@keyframes aroundAnimation{
0%,
100%,
20%,
50%,
80% {
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
transform: translate3d(0,0,0);
}
40%,
43%{
transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
transform: translate3d(-20px,0,,0);
}
70%{
transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
transform: translate3d(-10px,0px,0);
}
90%{
transform: translate3d(20px,0,0);
}
}
扫一扫
2173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
