这是一个关于元素的理论问题,让我们的.loader有变换：translate(10px,10px),在动画中我想要为scale属性设置动画.在这种情况下,浏览器不会进行转换：translate(10px,10px)并且仅采用比例.
这是这个问题的一个例子.请注意,我不是在寻找这个特定示例的答案(比如：包装元素或将translate值添加到动画定义中),而是一个通用的解决方案(当然,如果存在的话).
.loading {
position: relative;
width: 100px;
height: 100px;
background: #eee;
}
.loading:before,.loading:after {
content: "";
width: 50%;
height: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
/* the broswer doesn't take this */
transform: translate(100px,300px);
-webkit-animation: bounce 2s infinite ease-in-out;
animation: bounce 2s infinite ease-in-out;
}
.loading:after {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@keyframes bounce {
0%,100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
<div class="loading"></div>
解决方法
.loading {
position: relative;
width: 200px;
height: 200px;
background: #eee;
}
.loading:before,.loading:after {
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
transform: translate(100px,300px);
animation: bounce 2s infinite ease-in-out;
}
.loading:after {
animation-delay: -1s;
}
@keyframes bounce {
0%,100% {
transform: scale(0) translate(100px,300px);
}
50% {
transform: scale(1) translate(100px,300px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="loading"></div>
我写了一个类似的答案here,关于在一个元素上添加多个动画的问题,每个动画修改转换属性的值独立于另一个.我在这里链接它只是为了参考,不认为它们是重复的.
如上所述,当您尝试创建动画库或尝试将每个动画拆分为单独的类时,将原始变换添加到每个动画的kefyrames是不可能的.比如说,您想要将相同的反弹动画添加到多个元素,并且每个元素都有不同的初始变换设置,那么就无法将其添加到动画的关键帧中.
在这种情况下,您仍然可以使用CSS实现所需的输出,但在我看来,使用单个元素完成它将非常困难(几乎不可能).
你有什么选择？好吧,一个选项是你在包装元素上添加动画.
.loading-wrapper {
position: relative;
width: 200px;
height: 200px;
background: #eee;
}
.loading-before,.loading-after {
position: absolute;
width: 50%;
height: 50%;
top: 0px;
left: 0px;
animation: bounce 2s infinite ease-in-out;
}
.loading-before:before,.loading-after:before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
transform: translate(100px,300px);
}
.loading-after {
animation-delay: -1s;
}
@keyframes bounce {
0%,100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="loading-wrapper"> <div class="loading-before"></div> <div class="loading-after"></div> </div>
该解决方案非常通用,您可以将它应用于几乎所有这些情况.缺点是,如果你想要堆叠多个这样的转换,那么你最终可能会遇到多个这样的包装器.除了在动画的关键帧中添加原始变换之外,没有纯CSS方式.
下面的代码片段是另一个示例.
.move-n-scale {
position: relative;
height: 100px;
width: 100px;
background: sandybrown;
border: 1px solid chocolate;
transform: scale(0.5);
animation: move 1s linear infinite alternate-reverse;
}
.move {
position: relative;
display: inline-block;
animation: move-only 1s linear infinite alternate-reverse;
}
.scale {
position: absolute;
height: 100px;
width: 100px;
top: 0px;
left: 0px;
background: sandybrown;
border: 1px solid chocolate;
transform: scale(0.5);
}
@keyframes move {
from {
transform: translateX(0px) scale(0.5);
}
to {
transform: translateX(300px) scale(0.5);
}
}
@keyframes move-only {
from {
transform: translateX(0px);
}
to {
transform: translateX(300px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='move-n-scale'></div> <div class='move'> <div class='scale'></div> </div>
Note: Just to clarify,I did notice that you had mentioned about not wanting a solution which is very specific to this problem like wrap it etc. But,I had still added this solution as an answer because it is the only generic solution which I am aware of. I had added the second snippet only to show that is is indeed generic.
