css 动画移动元素位置

Question

我的 CSS 动画有这个问题。我有一个绝对居中于页面中间的元素位置，当我打开动画时，它会向右移动，当动画结束时它会移回页面中间。这是代码：

@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>

Answer 1

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

animation-fill-mode: forwards;

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

@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 动画移动元素位置

css animations moves element position

css

animation

positioning

css-position