在此LIVE DEMO上,您可以看到動畫如何在每個div
中移動其圖像並將opacity:1
設置爲文本。使用css動畫應用懸停緩動效果
當懸停客,自然所有樣式回到初始狀態直接,但我希望他們能順利地(放心)做到這一點,而不是在同一時間,沒有任何進展將所有的初始風格。
這是相關的動畫代碼:
#highlights div[class*="high-"]:hover > p {
-webkit-animation:downOp 0.3s ease-in 0s forwards;
-ms-animation:downOp 0.3s ease-in 0s forwards;
animation:downOp 0.3s ease-in 0s forwards;
}
#highlights div[class*="high-"]:hover > .image {
-webkit-animation:imgTrans 5s ease-out 0s forwards;
-ms-animation:imgTrans 5s ease-out 0s forwards;
animation:imgTrans 5s ease-out 0s forwards;
}
@-webkit-keyframes downOp {
0% {
opacity:0.7;
}
100% {
opacity:1;
}
}
@-ms-keyframes downOp {
0% {
opacity:0.7;
}
100% {
opacity:1;
}
}
@keyframes downOp {
0% {
opacity:0.7;
}
100% {
opacity:1;
}
}
@-webkit-keyframes imgTrans {
0% {
margin-right: 0;
}
100% {
margin-right: -50px;
}
}
@-ms-keyframes imgTrans {
0% {
margin-right: 0;
}
100% {
margin-right: -50px;
}
}
@keyframes imgTrans {
0% {
margin-right: 0;
}
100% {
margin-right: -50px;
}}
我們缺乏un':hover'ed風格。您是否已經在那裏設置動畫屬性? – 2014-10-03 09:46:39
哪個動畫設置?恐怕不知道你指的是什麼。在那裏,它是整個相關的代碼,以及在的jsfiddle。它缺少什麼東西嗎? – Biomehanika 2014-10-03 09:50:56