我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续 20

我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续移动，求大神指导（我用的css写的，不是js)... 我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续移动，求大神指导（我用的css写的，不是js) 展开

 我来答

2个回答

#合辑# 机票是越早买越便宜吗？

好求知
2016-02-20 · TA获得超过6514个赞

知道大有可为答主

回答量：966

采纳率：80%

帮助的人：1162万

我也去答题访问个人页

关注

展开全部

有动画效果的是css3的transition、@keyframes、animation等，css要鼠标移上去后改变状态只能用:hover伪类，暂停动画可以用设置animation-play-state:paused;，继续动画是animation-play-state:running; （可能需要设置添加-webkit-等私有前缀）其实动画还是推荐jq，实现起来还是挺方便的，而且不用担心浏览器兼容性。

给你写个例子：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>动画暂停</title>
	<style type="text/css">
	
	@keyframes move
	{
		from {
			transform: rotate(0deg);
			left: 0;
		}
		to   {
			transform: rotate(360deg);
			left: 600px;
		}
	}

	@-webkit-keyframes move
	{
		from {
			-webkit-transform: rotate(0deg);
			left: 0;
		}
		to   {
			-webkit-transform: rotate(360deg);
			left: 600px;
		}
	}

	@-zos-keyframes move
	{
		from {
			-zos-transform: rotate(0deg);
			left: 0;
		}
		to   {
			-zos-transform: rotate(360deg);
			left: 600px;
		}
	}

	@-o-keyframes move
	{
		from {
			-o-transform: rotate(0deg);
			left: 0;
		}
		to   {
			-o-transform: rotate(360deg);
			left: 600px;
		}
	}
	
	.box {
		animation:			move 3s alternate infinite;
		-webkit-animation:	move 3s alternate infinite; /* Safari 和 Chrome */
		-moz-animation:		move 3s alternate infinite; /* Firefox */
		-o-animation:		move 3s alternate infinite; /* Opera */
		position: absolute;
		background-color: yellow;
		width: 100px;
		height: 100px;
	}
	.box:hover {
		-webkit-animation-play-state: paused;
	}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>