1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <title></title>
    5.         <meta charset="UTF-8">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1">
    7.         <link href="css/style.css" rel="stylesheet">
    8.         <style type="text/css">
    9.             .box1{
    10.                 height: 500px;
    11.                 border-bottom: 2px solid black;
    12.                 position: relative;
    13.             }
    14.             .box2{
    15.                 height: 100px;
    16.                 width: 100px;
    17.                 border: 2px solid black;
    18.                 border-radius: 50%;
    19.                 position: absolute;
    20.                 left: 0;
    21.                 bottom: 0;
    22.                 right: 0;
    23.                 margin: 0 auto;
    24.                 animation: falldown 2s;
    25.             }
    26.             @keyframes falldown{
    27.                 0%,50%,100%{
    28.                     top: 0;
    29.                 }
    30.                 25%,75%{
    31.                     top: 396px;
    32.                 }
    33.             }
    34.         </style>
    35.     </head>
    36.     <body>
    37.         <div class="box1">
    38.             <div class="box2">
    40.             </div>
    41.         </div>
    42.     </body>
    43. </html>