为什么我的 CSS 动画只播放到一半？

Question

起初我完全是 CSS 的新手，对我的半工作动画有疑问。

所以我得到了一个 Container 和这个 Container 我想从 Header 滑动到正常位置但是动画只进行了一半然后它才开始 spring 没有动画到正常位置。

这是我的 CSS 代码，也许您会发现我做错了什么，或者我可以做些什么来更好地避免这些问题。是的，我知道我的 class 名字不好，我只是第一次尝试 CSS。

body{
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f5f6;
    padding-left: 100px;
    padding-right: 100px;
}

.class-image{
    width: 100%;
    height: 500px;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 10px 10px 0px 0px;
    object-position: 30% 60%;
    display: block;

}

.colorChange{
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.containerClass{
    padding: 16px;
    vertical-align: middle;
    animation: example 2s linear;
    width:85%;
    position:absolute;
}

.navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    a{
        color: #831D17;
        text-decoration: none;
        margin-left: 16px;
        font-weight: 700;
    }

    a:hover{
        font-weight:bolder;
        color: white;
        padding-left: 8px;
        padding-right: 8px;
        display: inline-block;
        line-height: 200%;
        font-size: 16px;
        border-radius: 20px;

        background-color: #333333;
        text-decoration: none;
    }

    @keyframes example {
            0% {
                bottom:100vH
            }
            100% {
                bottom: 0vH
            }            
        }         

    .highlight{
        color: black;
        font-weight: bolder;
        font-size: 48px;
    }

    .Fotoind{
        background-color:#333333;
        color: #D6D6D6;
        font-weight: 600;
        border-radius: 0px 0px 10px 10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 16px;
    }

    .MapsContainer{
        margin-top: 16px;
        width: 100%; border-radius: 10px; overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        display: flex;
        justify-content:space-between ;
    }

    .maps-right{
        background-color:#333333;
        color: #D6D6D6;
        font-weight: 600;
        border-radius: 0px 0px 0px 0px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 16px;
        margin-left: 16px;
        width: 30%;
    }

    .mapStyle{
        border: 0;
        height: 350px;
        width: 70%;
    }

    .contentdown{
        padding: 8px;
    }

    .legal{
        margin-right: 16px;
    }

<body>
  <div class="navbar">
          <h1 class="colorChange">Der Blaue Planet<br>
          <span class="highlight"> Die Erde</span>

       </h1>

       <div>
              <a href="#"> google </a>
              <a href="#"> Termin </a>
              <a href="#"> Preise </a>
              <a href="#"> Kalender </a>
       </div>

  </div>


  <div class="containerClass">
          <img class="class-image" src="Bilder/4k.jpg">


          <div class="Fotoind">
              Individuelle Fotos
          </div>

          <div class="MapsContainer">

              <iframe class="mapStyle" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.8384006473802!2d13.596700815695565!3d52.48206157980705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a849b423ae37e9%3A0x1c91decc13ce5a24!2sMechthildstra%C3%9Fe%2053%2C%2012623%20Berlin!5e0!3m2!1sde!2sde!4v1633806883383!5m2!1sde!2sde"
              allowfullscreen="" loading="lazy"></iframe>

              <div class="maps-right">
                  Ein Fast proffesionelles Seiten Layout
              </div>
          </div>

          <div class="contentdown"> 
              <span class="legal"> Copyright von morgen </span> | <a href="#">Impressum</a> | <a href="#"> Datenschutz</a>
          </div> 
  </div>

</body>

Answer 1

我使用 margin-top 而不是 bottom 属性并且效果很好。

@keyframes example {
    0% {
        margin-top: calc(-100vh - 100%);
    }
    100% {
        margin-top: 0vh
    }
}

我将其添加到 jsfiddle。 Link

为什么我的 CSS 动画只播放到一半？

Why is my CSS animation just for the half way working?

html

css

css-animations