/***** ANIMATION, APPLE *****/

@keyframes drehen {
0% { transform:rotate(0deg); }
4% { transform:rotate(10deg); }
8% { transform:rotate(-10deg); }
13% { transform:rotate(15deg); }
25% { transform:rotate(-15deg); }
30% { transform:rotate(0deg); }
42% { transform:rotate(-25deg); }
100% { transform:rotate(-440deg); }
}

@keyframes fallen {
0% { transform:translate(0,0); }
15% { transform:translate(0,47px); }
100% { transform:translate(-55px,52px); }
}

.modul #modul3-apple img {
animation: drehen 5s 3s ease-in-out;
transform-origin:50% 50%;
animation-iteration-count:1;
animation-fill-mode:forwards;
}

.modul #modul3-apple {
animation: fallen 3.6s 4s ease-in;
transform-origin:50% 0;
animation-iteration-count:1;
animation-fill-mode:forwards;
}



/***** ANIMATION, LOEWENZAHN *****/

@keyframes zahn11 {
0% { transform:translate(-3px,0) rotate(0); }
25% { transform:translate(3px,8px) rotate(10deg); }
50% { transform:translate(-3px,0) rotate(-5deg); }
75% { transform:translate(4px,-8px) rotate(1deg); }
100% { transform:translate(-3px,0) rotate(0); }
}
.modul #modul3-zahn11 {
animation: zahn11 12s ease-in-out infinite;
}


@keyframes zahn12 {
0% { transform:translate(-6px,0) rotate(0); }
25% { transform:translate(6px,4px) rotate(-5deg); }
50% { transform:translate(-2px,0) rotate(0deg); }
75% { transform:translate(9px,5px) rotate(5deg); }
100% { transform:translate(-6px,0) rotate(0); }
}
.modul #modul3-zahn12 {
animation: zahn12 24s ease-in-out infinite;
}


@keyframes zahn13 {
0% { transform:translate(0,0) rotate(-50deg); }
25% { transform:translate(0,-10px) rotate(-60deg); }
50% { transform:translate(0,-10px) rotate(-40deg); }
75% { transform:translate(-5px,-5px) rotate(-65deg); }
100% { transform:translate(0,0) rotate(-50deg); }
}
.modul #modul3-zahn13 {
animation: zahn13 19s ease-in-out infinite;
}


@keyframes zahn14 {
0% { transform:translate(0,0) rotate(-45deg); }
25% { transform:translate(-5px,5px) rotate(-55deg); }
50% { transform:translate(0,-10px) rotate(-50deg); }
75% { transform:translate(0,-5px) rotate(-65deg); }
100% { transform:translate(0,0) rotate(-45deg); }
}
.modul #modul3-zahn14 {
animation: zahn14 29s ease-in-out infinite;
}


@keyframes zahn2 {
0% { transform:translate(-5px,0) rotate(-0.5deg); }
50% { transform:translate(10px,0) rotate(-1.5deg); }
100% { transform:translate(-5px,0) rotate(-0.5deg); }
}
.modul #modul3-zahn2 {
animation: zahn2 17s ease-in-out infinite;
}


@keyframes zahn3 {
0% { transform:translate(0,0) rotate(-2deg); }
50% { transform:translate(0,10px) rotate(2deg); }
100% { transform:translate(0,0) rotate(-2deg); }
}
.modul #modul3-zahn3 {
animation: zahn3 21s ease-in-out infinite;
}



/***** ANIMATION, FISCHE *****/

@keyframes fish1 {
0% { transform:translate(-3px,0) rotate(0); }
25% { transform:translate(3px,8px) rotate(10deg); }
50% { transform:translate(-3px,0) rotate(-5deg); }
75% { transform:translate(4px,-8px) rotate(1deg); }
100% { transform:translate(-3px,0) rotate(0); }
}
.modul #modul3-fish1 {
animation: fish1 12s ease-in-out infinite;
}


@keyframes fish2 {
0% { transform:translate(-6px,0) rotate(1deg); }
10% { transform:translate(0,0px) rotate(0deg); }
30% { transform:translate(-6px,0px) rotate(2deg); }
60% { transform:translate(0,0px) rotate(0deg); }
70% { transform:translate(6px,4px) rotate(-1deg); }
80% { transform:translate(-2px,0) rotate(0deg); }
90% { transform:translate(2px,5px) rotate(2deg); }
100% { transform:translate(-6px,0) rotate(1deg); }
}
.modul #modul3-fish2 {
transform-origin:100% 50%;
animation: fish2 8s ease-in-out infinite;
}


/***** ANIMATION, SCHMETTERLING *****/

@keyframes fuehler1 {
0% { transform:rotate(0); }
25% { transform:rotate(3deg); }
50% { transform:rotate(-3deg); }
60% { transform:rotate(2deg); }
100% { transform:rotate(0); }
}
.modul #modul3-fuehler1 {
transform-origin:100% 100%;
animation: fuehler1 15s ease-in-out infinite;
}


@keyframes fuehler2 {
0% { transform:rotate(0); }
25% { transform:rotate(-3deg); }
50% { transform:rotate(3deg); }
70% { transform:rotate(-2deg); }
100% { transform:rotate(0); }
}
.modul #modul3-fuehler2 {
transform-origin:0% 100%;
animation: fuehler2 15s ease-in-out infinite;
}