animation动画 财富值53

2016-10-21 16:31发布

页面一加载就执行animation动画,在hover时停止动画并translateY(100px),可是怎么没有执行translateY动画

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style>  img{          animation:shake 1s linear infinite;     -webkit-animation:shake 1s linear infinite;     } @-webkit-keyframes shake {     0%,100% {         -webkit-transform: translate3d(0,0,0);         transform: translate3d(0,0,0);     }      10%,30%,50%,70%,90% {         -webkit-transform: translate3d(-10px,0,0);         transform: translate3d(-10px,0,0);     }      20%,40%,60%,80% {         -webkit-transform: translate3d(10px,0,0);         transform: translate3d(10px,0,0);     } }  @keyframes shake {     0%,100% {         -webkit-transform: translate3d(0,0,0);         -ms-transform: translate3d(0,0,0);         transform: translate3d(0,0,0);     }      10%,30%,50%,70%,90% {         -webkit-transform: translate3d(-10px,0,0);         -ms-transform: translate3d(-10px,0,0);         transform: translate3d(-10px,0,0);     }      20%,40%,60%,80% {         -webkit-transform: translate3d(10px,0,0);         -ms-transform: translate3d(10px,0,0);         transform: translate3d(10px,0,0);     } } img:hover{     animation-play-state:paused;     transform:translateY(100px);} </style> </head>  <body> <img src="hospital/images/1.png"> </body> </html> 
友情提示: 问题已经关闭,关闭后问题禁止继续编辑,回答。