CSS-анимация - скольжение текста слева направо - PullRequest
Новая
       20

CSS-анимация - скольжение текста слева направо

0 голосов
/ 18 марта 2019

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

Работа с середины экрана немного отличается, и я что-то упускаю.Текст появляется при загрузке страницы (когда он должен быть скрыт).Я могу легко сделать это, используя jQuery, но я уверен, что это более чем возможно, используя только CSS.Вот что я получил до сих пор

HTML: 

<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>

CSS: 

.slide-right {
   width: 100%;
   overflow: hidden;
   margin-left: 400px;
   max-width: 500px
}

.slide-right h2 {
   animation: 2s slide-right;
   animation-delay: 2s;
}

@keyframes slide-right {
    from {
       margin-left: -500px;
    }

    to {
       margin-left: 0%;
    }
 }


.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 400px;
  max-width: 500px
}

.slide-right h2 {
  animation: 2s slide-right;
  animation-delay: 2s;
}

@keyframes slide-right {
  from {
    margin-left: -500px;
  }

  to {
    margin-left: 0%;
  }
}
<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>

Like this

Спасибо

Ответы [ 2 ]

1 голос
/ 18 марта 2019

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

.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 300px;
  max-width: 500px
}

.slide-right h2 {
  animation: 2s slide-right 2s forwards;
    transform:translateX(-100%);
}

@keyframes slide-right {
  to {
    transform:translateX(0);
  }
}
<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>
0 голосов
/ 18 марта 2019

Вы можете установить начальное значение margin-left как -500px для h2

.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 400px;
  max-width: 500px
}

.slide-right h2 {
  margin-left: -500px;
  animation: 2s slide-right;
  animation-delay: 2s;
}

@keyframes slide-right {
  from {
    margin-left: -500px;
  }

  to {
    margin-left: 0%;
  }
}
<div class="slide-right">
  <h2>Text that will slide in from the left</h2>
</div>
...