<!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>運(yùn)行以后animation動畫可以正常顯示,但是鼠標(biāo)移動上去以后hover屬性中只執(zhí)行了pause和scale,有沒有什么辦法讓我鼠標(biāo)移上去以后執(zhí)行hover內(nèi)所有的動畫效果呢?還是說兩者是沖突的,只能執(zhí)行兩者之間的一個?
1 回答
牛奶老哥哥
TA貢獻(xiàn)204條經(jīng)驗 獲得超92個贊
我目前發(fā)現(xiàn)的是transform里面的rotate動畫是執(zhí)行了的,只是因為transition的過渡時間沒了(你那個是360度瞬間就轉(zhuǎn)了一圈所以你看不出來效果),當(dāng)將
animation-play-state: paused;
屬性去掉時,發(fā)現(xiàn)過渡時間有回來了,暫時是這個屬性的問題.
添加回答
舉報
0/150
提交
取消