javascript - html 从初始位置向上移动文本动画

Question

我正在尝试了解如何让文本从幻灯片中的初始位置向上 float 。怎么样OnGuardian在他们的网站上做。我已经尝试过 CSS animated 和 w3 animate 但问题是它不会从设置位置向上移动它只是从底部移动到原始位置。我愿意使用 CSS、Javascript 和 HTML。

这是我的代码

    <li style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(Images/homepage1.jpg)">
       <img  class ="slider-image" src="Images/tenniscentrallogo1.png">
        <!-- <div class="slider-logo "><span></span></div> -->
        <div class="slider-content ">
          <div class="slider-container ">
            <div class="slider-center ">
              <div class=" w3-animate-bottom slider-header">
                <h2> Financial freedom & fun at your fingertips </h2>
              </div>
              <p class = " w3-animate-bottom slidertext"> Take an  quantum leap into the future. Start a lucrative tennis business today with our dynamic team at your service</p>
                <a class="btn play-video-btn" href="#" data-toggle="modal" data-target="#videoModal" preload="auto">Watch the video</a>
          </div>
        </div>
      </div>
    </li>

我想为 slider-header 类和 slider-text 类设置动画。我的问题更多的是不知道如何找到想要的效果。

Answer 1

首先，确保您的文本在样式声明中包含 position:absolute;，然后尝试使用 bottom 属性的 CSS3 动画。

    @-webkit-keyframes moveUp {
          from { bottom : /* initial */ ; }
          to { bottom : /* some extent of move up like initial - 30px */ ; }
    }


    #text {
      -webkit-animation-name : moveUp ;
      -webkit-animation-duration: 1s;
      -webkit-animation-fill-mode: forwards ; /* to avoid the element going back to the initial position */
    }