Плавное вращение в анимации ключевых кадров CSS - PullRequest
Новая
       28

Плавное вращение в анимации ключевых кадров CSS

0 голосов
/ 05 октября 2018

Как сделать так, чтобы эта анимация ключевого кадра CSS 3 выглядела более плавно?

Как и раньше, вращение останавливается на 180 градусов.Я хотел бы, чтобы он завершил полное вращение на 360 градусов, не останавливаясь в середине.В идеале я бы хотел, чтобы он ускорялся и замедлялся. 

.icon {
  display: inline-block;
  animation: like 2s 3s infinite;
  font-size: 40px;
}

@keyframes like {
  0% {
    transform: rotate( 0deg ) scale( 1 );
  }
  10% {
    transform: rotate( 15deg ) scale( 1 );
  }
  50% {
    transform: rotate( -180deg ) scale( 1.4 );
  }
  100% {
    transform: rotate( -360deg ) scale( 1 );
  }
};
<div class="icon">
    &hearts;
</div>

PS: можно ли указать задержку между итерациями?Я думал, что этого можно достичь с помощью 3s, но, похоже, он применяется только до первой итерации, а не до последующих?

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Вы можете установить отдельные функции синхронизации на каждом ключевом кадре.

Настройка ключевого кадра, который облегчает до 180 градусов, чтобы он начинался плавно, но заканчивался с некоторой скоростью.

Установитеследующий ключевой кадр к противоположному, и вы пройдете 180 без остановки, но скорость анимации все равно будет увеличиваться и уменьшаться.

Как ответил Теман Афиф, чтобы получить паузу между анимациями, нужны свойства ключевого кадра, примененные к 2разные проценты. 

.icon {
  display: inline-block;
  animation: like 6s infinite linear;
  font-size: 40px;
}

@keyframes like {
  0% {
    animation-timing-function: ease-in;
    transform: rotate( 0deg ) scale( 1 );
  }
  25% {
    animation-timing-function: ease-out;
    transform: rotate( -180deg ) scale( 1.4 );
  }
  50%, 100% {
    transform: rotate( -360deg ) scale( 1 );
  }
};
<div class="icon">
    &hearts;
</div>
0 голосов
/ 05 октября 2018

Используйте linear и установите в последнем состоянии больше времени, добавив больший процент для имитации задержки между итерациями: 

.icon {
  display: inline-block;
  animation: like 2s 3s infinite linear;
  font-size: 40px;
}

@keyframes like {
  0% {
    transform: rotate( 0deg ) scale( 1 );
  }
  10% {
    transform: rotate( 15deg ) scale( 1 );
  }
  50% {
    transform: rotate( -180deg ) scale( 1.4 );
  }
  80%,100% {
    transform: rotate( -360deg ) scale( 1 );
  }
};
<div class="icon">
    &hearts;
</div>
...