在使用CSS关键帧动画时,我发现当我给一个元素两个动画时,比如:
.element {
animation: animate1 1000ms linear infinite,
animate2 3000ms linear infinite;
}
如果这两个动画都使用transform
属性进行动画制作,则只有最后一个通过级联触发。但是,如果@keyframes
动画是一个margin
或display
或其他css
属性,而另一个使用transform
,那么它们都会触发。
使用下面的相关代码进行here is a codepen example。
CSS
@keyframes move {
0%, 100% { transform: translateX(0px); }
50% { transform: translateX(50px); }
}
@keyframes skew {
0%, 100% { transform: skewX(0deg); }
50% { transform: skewX(15deg); }
}
@keyframes opacity {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
.taco {
animation: skew 2000ms linear infinite,
opacity 4000ms linear infinite;
}
在上面它们都会触发
.burger {
animation: skew 2000ms linear infinite,
move 4000ms linear infinite;
}
在上面只有最后一个触发器(通过级联)-为什么?
有没有不使用js
的解决方案?或者这是不起作用的东西?这个示例非常简单,我知道我可以将动画组合成一个动画,而不必同时声明两个动画,但这是对我正在处理的更复杂动画的测试。
谢谢
发布于 2013-01-20 01:34:55
您不能对同一属性(此处为变换属性)设置多次动画,在同一元素上,最后一个属性将覆盖其他属性,
您应该将目标元素放入div中,并在div上应用一个转换动画,在目标元素上应用其他转换动画...
.div_class
{
animation:animate1 1000ms linear infinite;
}
.element
{
animation:animate2 3000ms linear infinite;
}
发布于 2013-01-18 02:56:50
出于同样的原因,
transform: skewX(45deg);
transform: translateX(4em);
不会使元素倾斜,但只会移动它。如果你想同时倾斜和移动它们,那么你需要链接它们transform: skewX(45deg) translateX(4em)
你必须做一些像这样的事情
@keyframes t {
25% { transform: skewX(15deg); }
50% { transform: skewX(0deg) translateX(50px); }
75% { transform: skewX(15deg); }
}
您不需要显式指定0%
和100%
关键帧-它们将自动生成-请参阅。
然后你就可以使用
animation: t 4000ms linear infinite,
opacity 4000ms linear infinite;
还有一件事需要注意:skewX(angleValue) translateX(lengthValue)
恰好与translateX(lengthValue) skewX(angleValue)
相同。但是,在大多数情况下,应用变换的顺序与有关。对于skewX(angleValue) translateY(lengthValue)
和translateY(lengthValue) skewX(angleValue)
,您将得到不同的结果。
发布于 2015-05-21 09:14:07
@StephanMuller的jsfiddle基本上就是答案,这个语法对我很有效,http://jsfiddle.net/j83m5ha5/4
div {
background:green;
width:100px;
height:100px;
-webkit-animation: in 2s 200ms forwards, out 1s 2200ms forwards;
}
我相信OP已经提出了手头的问题,因为他想标准化他的动画,并根据需要应用它们,从我的类中获取最近的实践代码:https://jsfiddle.net/kgLc56w4/
#b15{
top:200px;
left:200px;
background:#ff3399;
-webkit-animation: r4 ease-in-out 2s forwards 24s, s4 ease-in-out 2s forwards 30s;
}
每个块只向一个方向移动,所以我没有做繁琐的工作来制作15个动画,而是使用了更简单的8。我知道这可以做得更简单,但这不是练习的重点。
我改变的是,我在最后的第15个元素上使用了斯蒂芬的语法,再次移动它,它起作用了。
你只需要小心计时,在Stephen的例子中,如果你增加了第一个( in )动画的持续时间,你需要增加第二个(out)动画的延迟。
示例:
-webkit-animation: in 20s 200ms forwards, out 1s 20200ms forwards;
希望这能有所帮助!
https://stackoverflow.com/questions/14384494
复制相似问题