Как реализовать эффект взрыва изображений в блоке с помощью css анимации?

Question

Есть блок с анимацией, заполняемость которого хочу реализовать с эффектом взрыва изображений цветов: сразу появляются 3 цветка в разных частях блока и под разными углами, затем еще 3 тоже в разных частях и под другими углами. Использую css анимацию.

У меня на текущий момент 2 проблемы:

изображения изначально разворачиваются под нужный градус, но затем по какой-то причине вновь занимают исходное положение
как добиться эффекта появления сначала 3ех изображений, а через небольшой промежуток времени остальных?

.animation {
  width: 250px;
  height: 250px;
  position: relative;
  background: blue;
}

.animation img {
  position: absolute;
}

.animation .fadeInRotate45 {
  right: 0;
}

.animation .fadeInRotate135 {
  bottom: 0;
}

.fadeIn,
.fadeInRotate45,
.fadeInRotate135 {
  animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
}

.fadeInRotate45 {
  animation-name: fadeInRotate45;
  -webkit-animation-name: fadeInRotate45;
}

.fadeInRotate135 {
  animation-name: fadeInRotate135;
  -webkit-animation-name: fadeInRotate135;
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeInRotate45 {
  0% {
    transform: rotate(0deg) scale(0);
    opacity: 0.0;
  }
  100% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInRotate45 {
  0% {
    -webkit-transform: rotate(0deg) scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

@keyframes fadeInRotate135 {
  0% {
    transform: rotate(0deg) scale(0);
    opacity: 0.0;
  }
  100% {
    transform: rotate(135deg) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInRotate135 {
  0% {
    -webkit-transform: rotate(0deg) scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: rotate(135deg) scale(1);
    opacity: 1;
  }
}

<div class="animation">
  <img class="fadeIn" src="https://img.lovepik.com/element/40022/6545.png_860.png" width="150" height="150" alt="">
  <img class="fadeInRotate45" src="https://img.lovepik.com/element/40022/6545.png_860.png" width="150" height="150" alt="">
  <img class="fadeInRotate135" src="https://img.lovepik.com/element/40022/6545.png_860.png" width="150" height="150" alt="">
</div>

Answer 1

Ваши проблемы решаются довольно просто:

Первая, с помощью animation-fill-mode: forwards;
Вторая, с помощью animation-delay: Ns;

Ещё больше пояснений в коде:

.animation {
  position: relative;
  width: 250px; height: 250px;
  border-radius: 50%; background: blue;
  box-shadow: inset 0 0 40px 5px #840;
}

.animation img {
  position: absolute;
  /* Размеры картинок лучше указывать здесь, иначе менять придётся через JS */
  width: 150px; height: 150px;
  /* Начальные значения, чтобы не было скачков в начале анимации */
  transform: scale(0); opacity: 0;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  /* Фиксируем картинки на последнем кадре */
  animation-fill-mode: forwards;
}
/* Позиции изображений */
.animation img:nth-of-type(1) { top: 0; left: 0; }
.animation img:nth-of-type(2) { top: 0; right: 0; }
.animation img:nth-of-type(3) { bottom: 0; left: 0; }
.animation img:nth-of-type(4) { top: 40%; right: 0; }
.animation img:nth-of-type(5) { top: 20%; left: 0; }
.animation img:nth-of-type(6) { top: 0; left: 10%; }
/* Несколько анимаций можно назначать через запятую.
   Главное условие - разные анимации должны управлять разными свойствами.
   Т.е., если одна изменяет высоту и вторая тоже - возникнет конфликт. */
.fadeIn.scaleRotate0 { animation-name: fadeIn, scaleRotate0; }
.fadeIn.scaleRotate45 { animation-name: fadeIn, scaleRotate45; }
.fadeIn.scaleRotate135 { animation-name: fadeIn, scaleRotate135; }
/* Класс для добавления задержки */
.delay { animation-delay: 1s; } 

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scaleRotate0 {
  0% { transform: scale(0); }
  90% { transform: scale(1.2); /* Небольшой bounce-эффект */ }
  100% { transform: scale(1); }
}
@keyframes scaleRotate45 {
  0% { transform: rotate(0deg) scale(0); }
  90% { transform: rotate(45deg) scale(1.2); }
  100% { transform: rotate(45deg) scale(1); }
}
@keyframes scaleRotate135 {
  0% { transform: rotate(0deg) scale(0); }
  90% { transform: rotate(135deg) scale(1.2); }
  100% { transform: rotate(135deg) scale(1); }
}

<div class="animation">
  <img class="fadeIn scaleRotate0" src="https://i.stack.imgur.com/uIJ82.png" alt="">
  <img class="fadeIn scaleRotate45" src="https://i.stack.imgur.com/uIJ82.png" alt="">
  <img class="fadeIn scaleRotate135" src="https://i.stack.imgur.com/uIJ82.png" alt="">
  <img class="fadeIn scaleRotate0 delay" src="https://i.stack.imgur.com/uIJ82.png" alt="">
  <img class="fadeIn scaleRotate45 delay" src="https://i.stack.imgur.com/uIJ82.png" alt="">
  <img class="fadeIn scaleRotate135 delay" src="https://i.stack.imgur.com/uIJ82.png" alt="">
</div>

БЛОГ НА HUSL

Как реализовать эффект взрыва изображений в блоке с помощью css анимации?

Ответы (1 шт):