CSS анимация преобразования - сохранить произвольное вращение - PullRequest
Новая
       24

CSS анимация преобразования - сохранить произвольное вращение

1 голос
/ 05 ноября 2019

У меня есть 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, ключевые кадры имеют другой атрибут transform, который устанавливает только scale. В результате, мой DIV поворачивается обратно к 0 во время анимации, и, в конце, он возвращается к повороту на 45 градусов. Но я хочу, чтобы он сохранил свое произвольное оригинальное вращение. Поэтому возникает вопрос: есть ли способ указать в свойстве transform ключевых кадров, что оно должно сохранять существующее (произвольное) вращение?

Что-то вроде transform: scale(1.15, 1.15) rotate(keep)?

Ответы [ 2 ]

1 голос
/ 05 ноября 2019

Использовать переменные 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>
0 голосов
/ 05 ноября 2019

Вот простое решение без переменных - я бы просто обернул ваш 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>
...