是否可以为转换选项设置不同的持续时间/延迟?
-
26-09-2019 - |
题
我想为我的 html 对象设置几个转换选项,但具有不同的持续时间和延迟。
如果我尝试使用类似的东西:
-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2);
-webkit-transition-duration: 2000ms, 6000ms;
-webkit-transition-delay: 0ms, 6000ms;
然后我将为变换和不透明度设置不同的时间函数,但我可以为旋转和缩放设置不同的选项,例如旋转10秒缩放20秒?
解决方案
可能不是直接的,但是可以通过以下方式达到相同的效果 嵌套元素.
其他提示
是的,你可以直接与CSS3动画做到这一点。如果有不透明度从0变换到1,持续20秒钟,然后,持续10秒的90度旋转,则在20秒的不透明度1创建为10秒不透明度0.5和旋转90度并且另一个关键帧在关键帧和旋转90度。这有点痛苦,但它会奏效。嵌套的div是有点清洁剂(如道格上面说的)
确定这里的代码:
@-webkit-keyframes foo {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 0;
}
50% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 0.5;
}
100% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
opacity: 1;
}
和你会把
-webkit-animation-duration: 20s;
到HTML中。
这是问题做到像道格说,如果你在你的动画3D透视。也许你可以使用“变换风格:保持-3D”,但它不工作在IE 10-11和所有其他的浏览器火狐exept工作怪异。所以,我认为唯一的解决办法是使用CSS3动画。在你的情况将是:
@-webkit-keyframes rotate_scale {
0% {
-webkit-transform: rotate(0deg) scale(0);
}
50% {
-webkit-transform: rotate(90deg) scale(0);
}
100% {
-webkit-transform: rotate(180deg) scale(2);
}
}
@keyframes rotate_scale {
0% {
transform: rotate(0deg) scale(0);
}
50% {
transform: rotate(90deg) scale(0);
}
100% {
transform: rotate(180deg) scale(2);
}
}
所以,你可以设置你的变换的最长持续时间。例如20秒旋转:animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale;
然后才算当你的另一变换将开始。在examle规模开始在十秒钟旋转之后。因此,这将是全时(50%)的一半。而且,它还将最后10秒,直到这样的全职(100%)结束。但是,如果你想进行大规模的持续时间5秒例如你需要添加新的关键75% { transform: rotate(135deg) scale(2); }
和写有双变换。
不隶属于 StackOverflow