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

at first im completly new to CSS and have a Question about my half working animation.

So I got an Container an this Container I wanted to slide from the Header to the normal Position but the Animation goes only the halfway and then its just starting spring without an animation to the normal Position.

Here is my CSS Code maybe you find anything I did wrong or something that I can do better to avoid those Problems. And yeah I know my class name are not good, I just tried out CSS for the first time.

My styles:

 <style>
    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;
        }

</style>

and my Body:

<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:0x1c91decc13ce5a24!2sMechthildstraße 53, 12623 Berlin!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>

CodePudding user response：

I used margin-top instead of bottom property and it works fine.

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

I added this to jsfiddle. Link