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

当我应用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>

​

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>

​