<!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内所有的动画效果呢?还是说两者是冲突的,只能执行两者之间的一个?
牛奶老哥哥