给定此代码(http://jsfiddle.net/bzf1mkx5/)
.intern {
-webkit-animation: in 1s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 1s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(1.2);}
}
<div style = "width : 100px; height : 100px; background-color : red" class ="intern"></div>
为什么没有动画?错误在哪里?
编辑:
通过使用两个分开的动画,它确实起作用了,但是具有反向属性的意义何在呢?
.intern {
-webkit-animation: in2 1s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 1s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(1.2);}
}
@-webkit-keyframes in2 {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(1.2);}
}
<div style = "width : 100px; height : 100px; background-color : red" class ="intern"></div>
编辑2:
如果我使用更多的时间,即使看到从一种状态跳到另一种状态的不良影响,我也应该看动画
.intern {
-webkit-animation: in 20s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 20s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(4);}
}
<div style = "width : 50px; height : 50px; background-color : red" class ="intern"></div>
最佳答案
首先让我们了解reverse
的含义
动画在每个循环中向后播放。换句话说,每次动画循环时,动画将重置为结束状态并重新开始。动画步骤向后执行,计时功能也相反。例如,缓入定时功能变为缓入。 ref
让我们以一个基本的例子来理解:
.box {
width:50px;
height:50px;
margin:5px;
background:red;
position:relative;
}
.normal {
animation: move normal 2s linear forwards;
}
.reverse {
animation: move reverse 2s linear forwards;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
<div class="box normal">
</div>
<div class="box reverse">
</div>
我们有一个动画,第一个元素向前运行,而第二个元素向后运行。从技术上讲,就像我们反转
from
和to
一样。 reverse
对于避免在相反方向定义新动画很有用。我们定义了一个从左到右的动画,反之,则是从右到左的动画。到目前为止,这是微不足道的。现在,如果您运行由其名称定义的任何类型的动画,并且在路上修改该动画的属性,您将更改整个动画的行为,我们将基于新动画再次计算当前状态的值。
例:
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move normal 20s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move reverse 20s linear forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
我们有3个元素同时使用同一动画制作动画,因此它们都将处于相同进度。第三个与第一个动画相同,并且悬停时与第二个相同。诀窍就在这里!在悬停时,您将不会考虑元素的实际位置,而只是向另一个方向移动,而是会考虑由
reverse
定义的新动画,并考虑动画的实际进度来计算left的值。如果元素在正常状态下位于动画的
5s
处,则为left:100px
;在相反状态下,我们为left:200px
;因此,如果将鼠标悬停在5s
上,则将在100px
和200px
并返回到left:100px
现在可以清楚地看到,如果动画结束了,您只需在第一个和最后一个状态之间切换即可。您将不会再触发新的动画,因为我们正在处理相同的动画,而我们只是更改了一个设置(方向)
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move normal 1s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move reverse 1s linear forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
如果更改任何其他属性,也会发生相同的逻辑。您将不会看到直观的结果,因为您需要想象新的动画效果如何才能确定当前状态。
如果我们更改计时功能的示例
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move 20s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move 20s ease forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
如果我们更改持续时间的示例:
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move 20s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move 30s linear forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
您要寻找的内容可以通过
0px
来实现,因为转换仅关心当前值,并且在需要时转换为新值(例如,悬停时).intern {
width: 100px;
height: 100px;
margin:50px;
background-color: red;
transition:10s all;
}
.intern:hover {
transform:scale(4);
}
<div style="" class="intern"></div>
悬停时,您将启动一个缩放动画,如果您将其悬停,则动画将持续
transition
,直到返回初始状态。您不能使用动画来做到这一点。动画需要完全播放,或者在中间突然取消动画,然后回到初始状态即使您定义了两个动画,当运行中的一个动画还没有结束时,您也不会总是在其上获得所需的结果。您将取消它并运行新的。
.intern {
width: 100px;
height: 100px;
margin:50px;
background-color: red;
animation:in 5s linear forwards;
}
.intern:hover {
animation:out 5s linear forwards;
}
@keyframes in {
from {
transform:scale(1);
}
to {
transform:scale(4);
}
}
@keyframes out {
from {
transform:scale(4);
}
to {
transform:scale(1);
}
}
<div style="" class="intern"></div>
尝试快速悬停/悬停,您会看到不好的效果。如果将鼠标悬停在每个动画的末尾,则只有完美的结果。
关于html - CSS动画如何对悬停事件使用“反转”?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58207208/