.my-image:hover {
-webkit-animation: my-image-anim 20s linear 0s infinite;
animation: my-image-anim 20s linear 0s infinite;
}
@-webkit-keyframes my-image-anim {
0% { margin-left: 0%; }
100% { margin-left: -100%; }
}
@keyframes my-image-anim {
0% { margin-left: 0%; }
100% { margin-left: -100%; }
}
当我将鼠标悬停在图像上时,向左滚动.当鼠标离开图像时,动画将重置为margin-left = 0.
我希望动画在鼠标退出处停止,然后在鼠标再次进入时恢复.这可能只使用css吗?
最佳答案
是.你想使用动画播放状态.
.my-image{
-webkit-animation: my-image-anim 20s linear 0s infinite;
animation: my-image-anim 20s linear 0s infinite;
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.my-image:hover{
animation-play-state: running;
-webkit-animation-play-state: running;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。