css动画转换-保持任意旋转

Question

我有一个CSS动画，例如：

@keyframes my-animation {
0%   { opacity: 0; visibility: visible; transform: scale(0,0); }
50%  { transform: scale(1.15, 1.15); }
100% { transform: none; }
}

我想把它应用于具有任意旋转的DIV，例如：

<div style="width:100px; height:100px; transform: rotate(45deg)"/> 

当我应用CSSanimation时，关键帧有另一个仅设置scale的transform属性。因此，在动画过程中，我的DIV会旋转回0，最后，它会恢复到45度旋转。但我希望它保持其任意的原始旋转。所以问题是：有没有办法在关键帧的transform属性中指定它应该保持现有的(任意(旋转？

类似transform: scale(1.15, 1.15) rotate(keep)的东西？

Answer 1

使用CSS变量

.x {
transform: rotate(var(--r,0deg));
height: 50px;
width: 50px;
display:inline-block;
background: green;
animation: my-animation 5s;
margin: 20px;
}
@keyframes my-animation {
0% {
opacity: 0;
transform: scale(0) rotate(var(--r,0deg));
}
50% {
transform: scale(1.15) rotate(var(--r,0deg));
}
}

<div class="x" style="--r:80deg"></div>
<div class="x" ></div>
<div class="x" style="--r:60deg"></div>

或者像下面这样，您可以将任何变换附加到关键帧中定义的变换

:root {
--r: rotate(0deg); /* Use any null transform (ex: translate(0), skew(0deg), etc)*/
}
.x {
transform: var(--r);
height: 50px;
width: 50px;
display:inline-block;
background: green;
animation: my-animation 5s;
margin: 20px;
}
@keyframes my-animation {
0% {
opacity: 0;
transform: scale(0) var(--r);
}
50% {
transform: scale(1.15) var(--r);
}
}

<div class="x" style="--r:rotate(80deg) skew(20deg)"></div>
<div class="x" ></div>
<div class="x" style="--r:rotate(60deg) translate(20px,20px)"></div>

Answer 2

这里有一个没有变量的简单解决方案-我只需要包装你的div并在包装器上进行缩放，保持内部div任意旋转。虽然很琐碎，但我认为它很管用。

.box {
height: 50px;
width: 50px;
background: green;
margin: 50px;
}
.scale-me {
animation: my-animation;
animation-duration: 10s;
}
@keyframes my-animation {
0% {
opacity: 0;
transform: scale(0);
}
50% {
transform: scale(1.15);
}
}

<div class="scale-me">
<div class="box" style="transform: rotate(45deg)"></div>
<div class="box" style="transform: rotate(60deg)"></div>
<div class="box" style="transform: rotate(120deg)"></div>
</div>