css animation transform - 保持任意旋转

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)"/> 

当我应用 CSS animation 时，关键帧有另一个仅设置 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>