>如何让鼠标离开第一个div动画播放向后文字逐渐变小而不是立刻?
>如何使向后播放速度慢5倍?
这是以下的Fiddle:
.two {
font-size: 0;
}
.one:hover + .two {
text-align: center;
-webkit-animation: zoom_in 0.5s ease 0s forwards;
-moz-animation: zoom_in 0.5s ease 0s forwards;
-o-animation: zoom_in 0.5s ease 0s forwards;
}
@-webkit-keyframes zoom_in {
from {
font-size: 0;
}
to {
font-size: 20px;
}
}
@-moz-keyframes zoom_in {
from {
font-size: 0;
}
to {
font-size: 20px;
}
}
@-o-keyframes zoom_in {
from {
font-size: 0;
}
to {
font-size: 20px;
}
}
<div class="one">
Hover
</div>
<div class="two">
Hello World!
</div>
最佳答案 在您的示例中,只有:hover伪类具有动画.当光标离开第一个div时,立即离开悬停状态并且没有指定动画.动画也需要在.two类上设置.
也就是说,对于像这样的悬停效果,CSS关键帧动画可能是不必要的.我们可以使用简单的transition
.
:hover伪类的转换持续时间更快,div类的转换持续时间更慢. :当光标离开div并且div上的较慢转换接管时,将保留:悬停状态.
例
.two {
font-size: 0;
}
.two {
text-align: center;
transition: font-size 2.5s; /* slower out */
}
.one:hover + .two {
text-align: center;
font-size: 20px;
transition: font-size 0.5s; /* faster in */
}
<div class="one">
Hover
</div>
<div class="two">
Hello World!
</div>