animation动画

Question

animation动画

发布于
2016-10-21

页面一加载就执行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>

css3动画

阅读 2.5k

1 个回答

得票最新

xingqiwu

22018

发布于
2016-10-21

动画里有transform，就算动画暂停了，也依然存在

撰写回答