css3动画特效：上下晃动的div
<div id="square" class="container animated">上下晃动</div>
/**
* transform-origin 设置旋转元素的基点位置
* animation-name 设置动画名称
* animation-duration 设置动画时间
* animation-fill-mode 设置播放后的状态
* animation-iteration-count 设置循环播放的次数
* transition-timing-function: cubic-bezier 贝塞尔曲线效果，它有四个值，指在X轴与Y轴的两个曲线的点，第一个点：X1 Y1;第二个点：X2 Y2
* transform: translate3d 设置动画Z轴位移几个元素，表示只在Z轴上移动
*
* 需要注意：transform: translate3d 不等于 transform: translateZ
*/
.animated {
animation-duration:
1s;
/*动画时间*/
animation-fill-mode:
both;
/*播放后的状态*/
}
.animated {
animation-iteration-count:
infinite;
/*动作循环的次数：infinite 无限循环*/
}
.animated {
animation-duration:
2s;
/*动画时间*/
}
.container {
background:
#2D97DB;
width:
90%;
height:
90%;
padding:
100px;
margin:
20px auto;
font-family:
"微软雅黑";
font-size:
40px;
color:
white;
text-align:
center;
line-height:
90%;
}
.container:hover{
animation-name:
container;
/*动画的名称*/
transform-origin:
center bottom;
/*设置动画旋转元素的基点为：居中靠下*/
cursor:
pointer;
}
@keyframes container{
0%,
100%,
20%,
50%,
80% {
transition-timing-function:
cubic-bezier(0.215,.61,.355,1);
/*贝塞尔曲线 ： X1 Y1 X2 Y2*/
transform:
translate3d(0,0,0);
/*设置只在Z轴上移动*/
}
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);
}
}
转载于:https://www.cnblogs.com/zhangxiaopeng/p/6247314.html
相关资源：jQuery CSS3多种不同效果的遮罩弹框插件.zip
