Как исправить «Анимацию текста»? - PullRequest
Новая
       9

Как исправить «Анимацию текста»?

1 голос
/ 06 октября 2019

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

Спасибо! 

h1.entry-title, .blog h1.entry-title
{
    font-family: 'Playfair Display', serif;
    font-size: 51px;
    line-height: 60px;
    font-weight: 400;
    color: #000;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 50px;
    text-align: left;
}

.flip {
  height:50px;
  overflow:hidden;
  display: inline-block;
  padding-left: 10px;
}

.flip > div > div {
  color:#000;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

.flip div:first-child {
  animation: show 8s linear infinite;
}

.flip div div {
  background:#fff701;
}
.flip div:first-child div {
  background:#fff701;
}
.flip div:last-child div {
  background:#fff701;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}
<div id="content" class="site-content">
                <div class="header-content content-1170 center-relative block">
                    <h1 class="entry-title">
                        You can’t wait for<div class=flip>
                        <div><div>succes,</div></div>
                        <div><div>money,</div></div>
                        <div><div>class,</div></div>
                      </div>
                        <br>
                        you have to go after it with a club.
                    </h1>
                </div>

1 Ответ

0 голосов
/ 06 октября 2019

Вы можете включить значения em и поведение элементов inline-block, чтобы отложить ваше поле в стороне от текста и координатных позиций:

пример с alternate, чтобы избежать скачка при каждом перезапуске animation. 

span {
  display: inline-block;
  vertical-align: -0.275em;
  /*reset box from the baseline */
  text-align: center;
  /* whatever*/
  height: 1.2em;
  /* average line-height*/
  overflow: hidden;
  /* don't let it grow*/
}

span span {
  display: block;
  /* stack pieces of text */
  background: yellow;
  margin-bottom: 0.2em;
  padding:0 0.2em;
}

span span:first-of-type {
  margin-top: -4.2em;
  /* 1.2em + 0.2em * 3 to climb up 3 boxes */
  animation: slide 8s alternate infinite;
}
span ~ span span {
background:tomato
}
span ~ span span:first-of-type {
  animation-delay:-4s;

}

@keyframes slide {
  /* 4 steps for 4 lines */
  0%,
  20% {
    margin-top: -4.2em;
  }
  25%,
  50% {
    margin-top: -2.8em;
  }
  55%,
  70% {
    margin-top: -1.4em;
  }
  75%,
  100% {
    margin-top: 0;
  }
}

p + p {font-size: 2.5em;}
<p> let's have <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> to tell or is that only <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> after all .</p>
<p> let's have <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> to tell or is that only <span> <span>text</span> <span>words</span> <span>stories</span> <span>CSS</span> </span> after all .</p>
...