页面一加载就执行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>
付费偷看金额在0.1-10元之间
一周热门 更多>