div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: 5s infinite;
}

@keyframes tandboven1 {
    0% {top: -10px;}
    10% {top: -60px;}
    25% {top: -20px; width: 50px;}
    75% {top: 5px;}
    100% {top: 10px; width: 50px; background: green;}  
}
@keyframes tandonder {
    0% {top: 50000px;}
    10% {top: 810px;}
    25% {top: 100000px; width: 50px;}
    75% {top: 50000px;}
    100% {top: 10000px; width: 50px; background: green;}  
}
@keyframes tandboven3 {
    0% {top: px;}
    10% {top: 0px;}
    25% {top: px; width: 50px;}
    75% {top: px;}
    100% {top: px; width: 50px; background: green;}  
}