hover和animation冲突

<!DOCTYPE html>
<html>
<head>
	<title>animation</title>
 <style type="text/css">
  @-webkit-keyframes divanimation{
	 0%{background-color:#00ae9d;}
	40%{background-color: #00ae9d;}
	80%{background-color: #00ae9d;}
	100%{background-color:#00ae9d;transform: scale(1.1);} 
}
 #div1{
	position: relative;
	width: 1000px;
	height:1000px;
	margin: 150px auto;
	background:linear-gradient(to right bottom,#145b7d,#11264f,#11264f,#11264f);
}
 #divf{
	position:absolute;
	width: 100px;
	height:100px;
	margin:600px;
	border-radius: 10%;
	animation: divanimation 3s infinite alternate;
	transition: 1s;
}
 #divf_1{

	position: relative;
	left: 17% ;
	top:10%;
	display: linear-gradient;
	font-weight: bold;
	font-size: 36px;
	color:white;
}
#div1 #divf:hover{
	background-color: red;
	transform:rotate(360deg) scale(1.3);
	animation-play-state: paused;
}
</style>
</head>
<body>
  <div id="div1">
  <div id="divf"><div id="divf_1">232</div></div>
  </div>
</body>
</html>

运行以后animation动画可以正常显示,但是鼠标移动上去以后hover属性中只执行了pause和scale,有没有什么办法让我鼠标移上去以后执行hover内所有的动画效果呢?还是说两者是冲突的,只能执行两者之间的一个?

若闻

浏览 2862回答 1

1回答

牛奶老哥哥

我目前发现的是transform里面的rotate动画是执行了的,只是因为transition的过渡时间没了(你那个是360度瞬间就转了一圈所以你看不出来效果),当将animation-play-state: paused;属性去掉时,发现过渡时间有回来了,暂时是这个属性的问题.

1 0

随时随地看视频慕课网APP