css 动画 抖动,css3实现循环抖动等动画

CSS3抖动

/*实现图片旋转，当鼠标移动上去就停止*/

/*实现的是过渡*/img:hover{width:1000px;

/*开始之前等待两秒*/transition:width 10s linear 0s;

/*Firefox 4*/-moz-transition:width 10s linear 0s;

/*Safari and Chrome*/-webkit-transition:width 10s linear 0s;

/*Opera*/-o-transition:width 10s linear 0s;

/*3D 转换*/transform:rotate(210deg);-webkit-transform:rotate(210deg); /*Safari 和 Chrome*/-moz-transform:rotate(210deg);

}

/*实现旋转*/@keyframes myfirst{0% {

transform:scale(1);transform:scale(1)}70%,73%{transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}77%,83%,90%,97%{transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}80%,87%,93%{transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}

@-moz-keyframes myfirst/*Firefox*/

{0% {

transform:scale(1);transform:scale(1)}70%,73%{transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}77%,83%,90%,97%{transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}80%,87%,93%{transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}

@-webkit-keyframes myfirst/*Safari 和 Chrome*/

{0% {

transform:scale(1);transform:scale(1)}70%,73%{transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}77%,83%,90%,97%{transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}80%,87%,93%{transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}

@-o-keyframes myfirst/*Opera*/

{0% {

transform:scale(1);transform:scale(1)}70%,73%{transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}77%,83%,90%,97%{transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}80%,87%,93%{transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}/*实现捆绑 myfirst*/img{-webkit-animation:myfirst 3s both infinite;-moz-animation:myfirst 3s both infinite;-ms-animation:myfirst 3s both infinite;animation:myfirst 3s both infinite;

}