@keyframes beavis {
    25% {color: blue;}
    50% {color: purple;}
    90% {color: pink}
}

@keyframes butthead {
    0% {background-color: aliceblue;}
    25% {background-color: brown;}
    50% {background-color: blueviolet;}
    75% {background-color: wheat;}
}

@keyframes forDiv{
    0% {background-color: aqua; left:0px; top:0px;}
    31% {background-color: brown; left:150px; top:50px; border-radius: 50%;}
    69% {background-color: blueviolet; left:-150px; top:100px; border-radius: 25%}
    100% {background-color: pink; left:0px; top:0px; border-radius: 0%;}
}

body {
    background-image: linear-gradient(to top, blueviolet 10%, green 11% 47%, blue 60%, whitesmoke);
    animation-duration: 4s;
}

h1 {
    text-align: center;
    color: aqua;
    font-size: 100px;
    margin-top: 50px;
    margin-bottom: 100px;
    animation-name: beavis;
    animation-duration: 10s;
}

img {
    width: 500px;
}

#nav {
    text-align: right;
    margin-right: 150px;
}

#image {
    text-align: center;
    position: relative;
    animation-name: forDiv;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}