CSS动画移动元素位置 [英] css animations moves element position

问题描述

我的CSS动画有此问题.我的元素位置绝对在页面中间居中，当我放置动画时，它移到右边，动画结束时它又移回到页面中间.这是代码:

I have this problem with my CSS animation. I have an element position absolute centered in the middle of the page and when I put the animation on, it moves to the right and when the animation is finished it moves back to the middle of the page. Here's the code:

@keyframes motto
 from
  opacity: 0
  transform: translate3d(0, -100%, 0)
 to
  opacity: 1
  transform: none

#home
 .motto
  position: absolute
  top: 50%
  left: 50%
  margin-right: -50%
  transform: translate(-50%, -50%)
  animation-name: motto
  animation-duration: 2s
  h1
   margin: 0
   font-size: 42px
   font-weight: 100
   opacity: .5
   -webkit-animation-duration: 2s

提前谢谢！

     @keyframes motto {
       from {
         opacity: 0;
         transform: translate3d(0, -100%, 0);
       }
       to {
         opacity: 1;
         transform: none;
       }
    }
    .motto {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      animation-name: motto;
      animation-duration: 2s;
    }
    .motto h1 {
      margin: 0;
      font-size: 42px;
      font-weight: 100;
      opacity: .5
      -webkit-animation-duration: 2s;
      }

<div class="motto"><h1>css <span>animation</span></h1></div>

推荐答案

在.motto的CSS中使用以下行:

Use the following line in the CSS of .motto :

animation-fill-mode: forwards;

这会将元素设置为在动画的最后一帧中显示.

This sets the element to display as it is in the final frame of the animation.

@keyframes motto {
       from {
         opacity: 0;
         transform: translate3d(0, -100%, 0);
       }
       to {
         opacity: 1;
         transform: none;
       }
    }
    .motto {
      position: absolute;
      width: 400px;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      animation-name: motto;
      animation-duration: 2s;
      animation-fill-mode: forwards;
    }
    .motto h1 {
      margin: 0;
      font-size: 42px;
      font-weight: 100;
      opacity: .5;
      text-align: center;
      }

<div class="motto"><h1>css <span>animation</span></h1></div>

这篇关于CSS动画移动元素位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！