keyframes анимация

Question

столь глупый вопрос, но я не понимаю если есть движение по x (с права на лево) и y ( с низу в верх) как сделать что бы текст выдвигался с левой стороны, я только учусь анимациям а в интернете особо такого ничего не нашёл.

Answer 1

Можно использовать маргин, можно падинг, можно через left, top... Тут смотреть надо на общий код смотря куда ставим :) Но вот пример на то что бы он приехал справа к нам.

@keyframes uvilichenie {
  0% {
    margin-left: 300px;
  }

  100%{
    margin-left: 0px;
  }
}

Answer 2

Это то, как я понял заданный вопрос))

.wrapper {
  background-color: grey;
  display: block;
  width: 300px;
  height: 100px;
  padding: 5px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  animation: movement 3s 1s forwards;
}
p {
  color: white;
  font-size: 18px;
  text-indent: -1000px;
  animation: movementText 3s 1s forwards;
}

@keyframes movement {
  from {
    bottom: 0;
    right: 0;
  }
  to {
    bottom: calc(100% - 110px);
    right: calc(100% - 310px);
  }
}
@keyframes movementText {
  from {
    text-indent: -1000px;
  }
  to {
    text-indent: 0;
  }
}

<div class="wrapper">
  <p>Текст выезжающий слева</p>
</div>

БЛОГ НА HUSL

keyframes анимация

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