3

У меня есть блок, который я хочу анимировать таким образом: введите сюда описание изображения

То есть...

  1. Начальное положение;
  2. Вверх на 100рх;
  3. Вправо на 100рх;
  4. Вниз на 100рх;
  5. Влево на 100рх – возвращение к начальному положению;

Проблема в том, что анимация работает так, что, например, при "поднятии" элемента на 100рх верх, он сразу же опускается на свое изначальное положение, и как следствие невозможно прописать четкий путь движения. Вот:

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  display: flex;
  align-items: center;
  margin-top: 100px;
  position: relative;
  animation: blocks 2s ease-in-out infinite;
}

.block_child {
  width: 100px;
  height: 100px;
  background: purple;
  border: 2px double white;
}

@keyframes blocks {

  25% {
   transform: translateY(-100px);
  }
  
  50% {
    transform: translateX(100px);
  }
  
  100% {
   
  }
}
<div class="block">
  <div class="block_child"></div>
</div>

Можно ли это сделать? Если да, то как?

2 ответа 2

6

Пример

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  display: flex;
  align-items: center;
  margin-top: 100px;
  position: relative; 
}

.block_child {
  position: absolute; bottom: 0; left: 0;
  width: 100px;
  height: 100px;
  background: purple;
  border: 2px double white;
   animation: blocks 2s ease-in-out infinite;
}

@keyframes blocks {
  0% {
   transform: translateX(0px) translateY(-100px);
  }  
  25% {
    transform: translateX(100px) translateY(-100px);
  }
  50% {
    transform: translateX(100px) translateY(0px);
  }
  75% {
   transform: translateX(0px) translateY(0px);
  }
  100% {
   transform: translateX(0px) translateY(-100px);
  }  
}
<div class="block">
  <div class="block_child"></div>
</div>

1
  • Ага, я поняла. Большое спасибо
    – Eva
    12 сен 2020 в 16:34
3

SVG вариант

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         width="200" height="200" viewBox="0 0 200 200" >  

<rect width="200" height="200" fill="yellow" stroke="black" stroke-width="2"  stroke-dasharray="4" />
<rect width="100" height="100" fill="purple" stroke="black" stroke-width="2"  stroke-dasharray="4" >
  <animateTransform
    attributeName="transform"
    type="translate"
    dur="2s"
    repeatCount="indefinite"
    values="
    0,0;
    100,0;
    100,100;
    0,100;
    0,0" />  
</rect>
</svg>   

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.