У меня есть блок, который я хочу анимировать таким образом:
То есть...
- Начальное положение;
- Вверх на 100рх;
- Вправо на 100рх;
- Вниз на 100рх;
- Влево на 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>
Можно ли это сделать? Если да, то как?