html - 向后翻转动画 CSS

Question

在我的小测试 html 页面上，我有 4 个元素。将鼠标悬停在这些元素上时会播放 CSS 动画，但我希望当用户停止将鼠标悬停在这些元素上时动画会反转。

-webkit-animation-direction:alternate;

没用。我目前的代码如下:

<style>

div:hover{
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
-webkit-animation-direction:alternate;
}

@-webkit-keyframes animationFrames {
0% {

opacity:1;
-webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform:  rotate(60deg) ;

}
40% {
-webkit-transform:  rotate(40deg) ;

}
60% {
-webkit-transform:  rotate(54deg) ;
}
80% {
-webkit-transform:  rotate(42deg) ;

}
100% {

opacity:1;
-webkit-transform:  rotate(46deg) scaleX(1) scaleY(1) ;
}
}

.testje1
{
background: black;
width:48px;
height:20px;

position:absolute;
left:200px;
top:200px;
}

.testje2
{
background: black;
width:48px;
height:20px;


position:absolute;
left:300px;
top:200px;
}

.testje3
{
background: black;
width:48px;
height:20px;


position:absolute;
left:400px;
top:200px;
}

.testje4
{
background: black;
width:48px;
height:20px;

position:absolute;
left:500px;
top:200px;
}

p
{
position:absolute;
top:-14;
left:2;
color:white;
}
</style>

<a href="http://www.redrumbureau.com" target="_blank" >
<div class="testje1"><p>home</p></div>
</a>

<a href="http://www.redrumbureau.com/work" target="_blank">
<div class="testje2"><p>home</p></div>
</a>

<a href="http://www.redrumbureau.com/clients" target="_blank">
<div class="testje3"><p>clients</p></div>
</a>

<a href="http://www.redrumbureau.com/about" target="_blank">
<div class="testje4"><p>about</p></div>
</a>

非常感谢所有帮助!

Answer 1

使用reverse使动画“向后”:

-webkit-animation-direction:reverse;

这里有一个很好的详细教程 keyframes如果您想了解有关可用选项的更多信息，请参阅 CSS 技巧。