css3动画之左右摇摆
2018-01-09 16:55
218 查看
@-webkit-keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
@-moz-keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
@-o-keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
@keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
.main .title .logo{
float: left;
width: 60px;height: 60px;
animation: zy 2.5s .15s linear infinite;
-moz-animation: zy 2.5s .15s linear infinite; /* Firefox */
-webkit-animation: zy 2.5s .15s linear infinite; /* Safari and Chrome */
-o-animation: zy 2.5s .15s linear infinite; /* Opera */
}
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
@-moz-keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
@-o-keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
@keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
.main .title .logo{
float: left;
width: 60px;height: 60px;
animation: zy 2.5s .15s linear infinite;
-moz-animation: zy 2.5s .15s linear infinite; /* Firefox */
-webkit-animation: zy 2.5s .15s linear infinite; /* Safari and Chrome */
-o-animation: zy 2.5s .15s linear infinite; /* Opera */
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android动画(图片闪烁、左右摇摆、上下晃动等效果)
- android动画实例之(图片闪烁、左右摇摆、上下晃动等效果)
- 剖析Android动画(图片闪烁、左右摇摆、上下晃动等效果) .
- Android自定义动画学习，实现左右摇摆动画
- 动画(Animation) 之 (闪烁、左右摇摆、上下晃动等效果)
- android 动画（Animation）闪烁、左右摇摆，上下晃动等效果实现
- 自定义动画实现左右摇摆
- 动画(Animation) 它 (闪烁、左右摇摆、跷跷板等功效)
- Android左右摇摆动画，开始动画，结束动画
- Android动画(图片闪烁、左右摇摆、上下晃动等效果)
- css3实现从左右两边以动画的形式分别插入文字和图片
- 深入剖析Android动画(Animation) (闪烁、左右摇摆、上下晃动等效果)
- Android动画(图片闪烁、左右摇摆、上下晃动等效果)
- css3制作左右拉伸动画菜单
- 动画(Animation) 之 (闪烁、左右摇摆、上下晃动等效果)
- 动画-左右摇摆
- android中的animation动画左右摇摆晃动
- 剖析Android动画(图片闪烁、左右摇摆、上下晃动等效果)
- CSS3小模块hover左右交替互换动画
- 动画(Animation) 之 (闪烁、左右摇摆、上下晃动等效果)