fancy.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container{background-color: aqua; padding:30px; animation: move 8s linear infinite;}
        .content {padding: 40px; background-color:red;animation: move 8s linear infinite;}
        .Dog {animation: move 8s linear infinite;}
        @keyframes move{

            100%{
             transform: translate(0);
            }
            100%{
            transform:translate(500px);
            }
            }
        </style>

    </style>
    <link rel="stylesheet" href="fancy.css">
    <title>Animation</title>

</head>
<body>
<h1>Input</h1>
<div class="Form"><input type="text" name="Name" autocomplete="off" role="list"></div>
<label for="name" class="label-name">
<span class="content-name">Name</span>
</label>
<div class="container">Please help me!</div>
<div class="content">Adoption or euthanasia</div>
<div class="Dog">
    <img src="imgdog.png" alt="Image of dog">
</div>
<div class="containe">
    <header>
        <nav>
            <ul>
                <li>
                  Where do I come from
                </li>
                <li>
                    My breed
                </li>
                <li> 
                   My pesonality 
                </li>
            </ul>
        </nav>
    </header>
    <button class="Home" role="button" aria-checked="true">Home</button>
    <button class="About" role="button" aria-checked="true">About</button>
    <button class="Contact" role="button" aria-checked="true">Contact</button>
</body>
</html>