在处理动画时,我遇到了一个没有记录且意外的行为：
当使用transform(任何转换属性,仅转换属性)链接动画时,第一个动画将具有从状态A转换到状态B的预期行为,而第二个动画将从B转到C而没有任何转换.
div {
background:red;
width:100px;
height:100px;
-webkit-animation: in 2s,out 2s 3s forwards;
animation: in 2s,out 3s 2s forwards;
}
@keyframes in {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes out {
from {
transform: scale(1);
}
to {
transform: scale(.5);
}
}
@-webkit-keyframes in {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes out {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(.5);
}
}
<div></div>
我知道在这种特殊情况下,事情可以在一个步骤中完成,但这不是我正在寻找的解决方案
我怎样才能使用CSS解决这个问题？
更新：一切似乎在firefox中工作得很好,它可能是一个铬虫吗？
更新2：按要求添加前缀免费动画;变化不大.
解决方法
这是另一个Chrome渲染错误.
奇怪的是,一个解决方法似乎是添加一些其他无关紧要的属性,以使其认识到动画似乎正在发生.在这种情况下,我添加了一行,将背景设置为默认情况下的内容.这只需要为-webkit-关键帧动画完成.
项目中的实际修复可能需要也可能不需要将属性更改为其他内容/添加更多位置.没有测试自己,我无法知道.
div {
background:red;
width:100px;
height:100px;
-webkit-animation: in 2s,out 3s 2s forwards;
}
@keyframes in {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes out {
from {
transform: scale(1);
}
to {
transform: scale(.5);
}
}
@-webkit-keyframes in {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
background:red;
}
}
@-webkit-keyframes out {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(.5);
}
}
<div></div>
附注：
>使用分号 – 如果不这样做,你就会无缘无故地让每个人的生活更加艰难.
>使用良好的格式 – 与上述相同的原因
>你don’t need to使用-moz-进行动画或变换(没有-moz-transform)>在前缀之后放置未加前缀版本的属性 – 您希望它们尽可能使用更标准的版本 – 因为CSS是级联的,这意味着它会在之后放置,它将回到上面的内容.
