Блог

Главная - Вопросы по программированию - Как повторно использовать анимацию в CSS в разных точках ключевых кадров?

Как повторно использовать анимацию в CSS в разных точках ключевых кадров?

#css #css-animations

Вопрос:

Мое намерение состоит в том, чтобы сделать родительский квадрат, содержащий четыре меньших дочерних куба. Я бы хотел, чтобы анимация заставляла эти четыре меньших куба перемещаться внутри родительского куба. Сначала я делаю один куб и перемещаю его вот так:

 .parent {
  background-color: aliceblue;
  height: 400px;
  width: 400px;
  margin: 25px;
  padding: 25px;

}
.child{
  background: black;
  position: absolute;
  height:100px;
  width:100px;
  animation: move_around 5s ease-in-out infinite backwards;
}

@keyframes move_around {
  0% {
      transform: translateX(0%);
  }
  25% {
      transform:translateY(300%);
  }
  50% {
      transform:translateY(300%) translateX(300%);
  }
  75% {
      transform: translateX(300%);
  }
}  
 <div class="parent">
    <div class='child'></div> 
</div>

Однако мое намерение состоит в том, чтобы сделать четыре таких маленьких кубика, и я хочу, чтобы они начинались с каждого угла. Конечно, я мог бы вручную добавить еще один куб, добавив еще child один и добавив к нему новую пользовательскую анимацию, вот так:

 .parent {
    background-color: aliceblue;
    height: 400px;
    width: 400px;
    margin: 100px;
    padding: 25px;
}
.child{
    background: black;
    position: absolute;
    height:100px;
    width:100px;
}

.top {
    animation: move_around 5s ease-in-out infinite backwards
} 
.bot {
    animation: move_around_bot 5s ease-in-out infinite backwards
}


@keyframes move_around {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform:translateY(300%);
    }
    50% {
        transform:translateY(300%) translateX(300%);
    }
    75% {
        transform: translateX(300%);
    }
} 

@keyframes move_around_bot {
    0% {
        transform:translateY(300%) translateX(300%);
    }
     25% {
        transform: translateY(0%) translateX(300%);
    } 
    50% {
        transform: translateY(0%) translateX(0%)
    }
    75% {
        transform: translateX(0%) translateY(300%);
    }
    100% {
        transform:translateY(300%) translateX(300%);
    }
}   
 <div class="parent">
    <div class='child top'></div> 
    <div class='child bot'></div>
</div>

Однако это не кажется лучшим способом. Теперь у меня их два, с более чем удвоенным количеством строк. Потребуется ли снова удвоить количество строк для четырех кубов? Что, если я захочу еще больше кубиков? Мой подход не кажется очень полезным в этом плане.

Я понял, что второй куб здесь идентичен первому кубу, за исключением того, что его анимация составляет в основном 50% кадров «впереди». Есть ли способ добавить 3-й, 4-й или N-й куб, который составляет 25%, 75% или X% кадров «впереди»?

Ответ №1:

Вы могли бы использовать animation-delay: -1.25s для второго куба, -2.5s для третьего и -3.75s для последнего.

Ответ №2:

Вы могли бы сделать что-то вроде:

 .parent img:nth-child(1){
    animation-delay: 0s; /* change this to something else for each */
 }

Чтобы изменить задержку анимации, измените секунды, с которых вы начинаете, и чтобы изменить нужный вам куб, измените параметр вверху на что-то вроде:

 .parent img:nth-child(2){

Ответ №3:

Да animation-delay , будет работать.

 .parent {
  background-color: aliceblue;
  height: 400px;
  width: 400px;
  margin: 25px;
  padding: 25px;

}
.parent .child:nth-child(1){
    animation-delay: 0s; 
 } 
 .parent .child:nth-child(2){
    animation-delay: -1.25s; 
 }
 .parent .child:nth-child(3){
    animation-delay: -2.5s; 
 }
 .parent .child:nth-child(4){
    animation-delay: -3.75s; 
 }
.child{
  background: black;
  position: absolute;
  height:100px;
  width:100px;
  animation: move_around 5s ease-in-out infinite backwards;
}

@keyframes move_around {
  0% {
      transform: translateX(0%);
  }
  25% {
      transform:translateY(300%);
  }
  50% {
      transform:translateY(300%) translateX(300%);
  }
  75% {
      transform: translateX(300%);
  }
}  
 <div class="parent">
    <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
Метки: