.bolletjes1 {
    width: 30px;
    height: 30px;
    background-color: orange;
    border:solid 4px darkorange;
    animation: bolletjes1 ease-in-out 4s infinite alternate;
    border-radius: 50px;
    position: absolute;
    animation-fill-mode: both;
}

@keyframes bolletjes1 {
  0%   {left:0; top:50px;}
    35% {top:50px;}
  50%  {top:0;}
    65% {top:50px;}
  100% {left:300px; top:50px;}
}

.bolletjes2 {
    width: 30px;
    height: 30px;
    background-color: orange;
    border:solid 4px darkorange;
    animation: bolletjes2 ease-in 5s infinite;
    border-radius: 50px;
    position: absolute;
    animation-fill-mode: both;
}

@keyframes bolletjes2 {
  0%   {left:0; top:50px; background-color: rgba(255, 165, 0, 0); border:solid 4px rgba(255, 140, 0, 0);}
    5% {background-color: orange; border:solid 4px darkorange;}
    25% {top:50px;}
  33%  {top:20px;}
    40% {top:50px; background-color: red; border:solid 4px darkred;}
    55% {left:300px;top:50px;}
  60% {left:800px; top:-50px; background-color: purple; border:solid 4px;}
    100% {left:900px; top:-50px; }
}

.beestjes {
    width: 30px;
    height: 30px;
    background-color: red;
    border:solid 4px darkred;
    animation: beestjes2 ease-out 4s infinite, beestjes linear 4s infinite ;
    border-radius: 50px;
    position: absolute;
    animation-fill-mode: both;
}

@keyframes beestjes {
  0%   {top:0;}
  8%  {top:0;}
    13% {top:-10px;}
    25% {top:100px;}
    31% {top:80px;}
    40% {top:100px;}
    47% {top:90px;}
    54% {top:100px;}
  100% {top:100px;}
}

@keyframes beestjes2 {
    0%   {left:0;}
  100% {left:500px;}
}



.wobblybg1 {
    animation: wobblybg linear 1s infinite 0.5s;
    height:300px;
    width:1500px;
    background-size: 100% 100%;
    position: absolute;
    
}

.wobblybg2 {
    animation: wobblybg linear 1s infinite;
    height:800px;
    width:1500px;
    background-size: 100% 100%;
    position: absolute;
}

@keyframes wobblybg {
    0% {background-image: url("images/terugkeer/wobbles1.png");}
    20% {background-image: url("images/terugkeer/wobbles2.png");}
    40% {background-image: url("images/terugkeer/wobbles3.png");}
    60% {background-image: url("images/terugkeer/wobbles4.png");}
    80% {background-image: url("images/terugkeer/wobbles5.png");}
    100% {background-image: url("images/terugkeer/wobbles1.png");}
}

.txtmove {
    animation: txtmove linear 0.15s infinite;
    position: relative;
}

@keyframes txtmove {
    0% {top:0;left:0;}
    50% {top:1px;left:1px;}
    100% {top:0;left:0;}
}

.txtmovemore {
    animation: txtmovemore linear 0.1s infinite;
    position: relative;
}

@keyframes txtmovemore {
    0% {top:0;left:0;}
    50% {top:2px;left:1px;}
    100% {top:0;left:0;}
}

.txtmoveslow {
    animation: txtmoveslow linear 1s infinite;
    position: relative;
}


@keyframes txtmoveslow {
    0% {top:-1px;left:0;}
    50% {top:2px;left:0;}
    100% {top:0;left:0;}
}

.applaus {
    animation: applaus linear 0.3s infinite;
    background-size: 100% 100%;
    background-position: center;
    padding: 8px;
    padding-bottom: 10px;
}

@keyframes applaus {
    0% {background-image: url("images/terugkeer/applaus1.png")}
    25% {background-image: url("images/terugkeer/applaus2.png")}
    50% {background-image: url("images/terugkeer/applaus3.png")}
    75% {background-image: url("images/terugkeer/applaus4.png")}
    100% {background-image: url("images/terugkeer/applaus1.png")}
}