Insekten-Fotographie
Bildwechsel-Animationen
mit Javascript und CSS
7-Punkt-Marienkäfer
Abflug
Ameise
Asiatischer Marienkaefer
Baumwanze
Biene
Blasenkopf-Fliege
Spitzenfleck Libelle
C-Falter
Disteln
Dolchwespe
Gymnosoma rotundatum
Gefleckter Schmalbock
Heuschrecke
Hummel
Kartoffelkäfer
Kleiner Fuchs
Larve Grüne Reiswanze
Larve Wanze
Gemeine Heidelibelle
Sympetrum vulgatum
Libellen-Kopf
Ohrwurm
Raupe
Schwebfliege
Streifenwanze
Wanze
Weichkäfer
Wiesenwanze
Wollschweber
Projekt:
insektoid.de
Projekte
Arbeiten
Animationen
Restlicht
Flower Power
Insekten
Znaniecki
Impressum
© 2026 Heino Cunze-Fischer
.downdr1 { -moz-animation-duration:4s; -webkit-animation-duration:4s; animation-duration:4s; } .downdr2 { -moz-animation-duration:5.5s; -webkit-animation-duration:5.5s; animation-duration:5.5s; } .downdr3 { -moz-animation-duration:7s; -webkit-animation-duration:7s; animation-duration:7s; } .downdr4 { -moz-animation-duration:8.5s; -webkit-animation-duration:8.5s; animation-duration:8.5s; } .downdr0,.downdr1,.downdr2,.downdr3,.downdr4 {animation-fill-mode:forwards} @-moz-keyframes dndreh { 0% {transform: translateY(0) rotate(0deg)} 1% {border:1px solid #00000080} 100% {transform: translateY(2000px) rotate(720deg);display:none} } @-webkit-keyframes dndreh { 0% {transform: translateY(0) rotate(0deg)} 1% {border:1px solid #00000080} 100% {transform: translateY(2000px) rotate(720deg);display:none} } @keyframes dndreh { 0% {transform: translateY(0) rotate(0deg)} 1% {border:1px solid #00000080} 100% {transform: translateY(2000px) rotate(720deg);display:none} }
.downdr0 { -moz-animation-duration:1s; -webkit-animation-duration:1s; animation-duration:1s; } .downdr1 { -moz-animation-duration:2s; -webkit-animation-duration:2s; animation-duration:2s; } .downdr2 { -moz-animation-duration:3s; -webkit-animation-duration:3s; animation-duration:3s; } .downdr3 { -moz-animation-duration:4s; -webkit-animation-duration:4s; animation-duration:4s; } .downdr4 { -moz-animation-duration:5s; -webkit-animation-duration:5s; animation-duration:5s; } .downdr0,.downdr1,.downdr2,.downdr3,.downdr4 {animation-fill-mode:forwards} @-moz-keyframes dndreh { 0% {transform: translateX(0) rotate(0deg) scale(1);filter:hue-rotate(0deg)} 1% {border:1px solid #00000080} 75% {transform: translateX(1500px) rotate(360deg) scale(0);filter:hue-rotate(45deg)} 100% {transform: translateX(2000px) rotate(720deg) scale(0);filter:hue-rotate(90deg);display:none} } @-webkit-keyframes dndreh { 0% {transform: translateX(0) rotate(0deg) scale(1);filter:hue-rotate(0deg)} 1% {border:1px solid #00000080} 75% {transform: translateX(1500px) rotate(360deg) scale(0);filter:hue-rotate(45deg)} 100% {transform: translateX(2000px) rotate(720deg) scale(0);filter:hue-rotate(90deg);display:none} } @keyframes dndreh { 0% {transform: translateX(0) rotate(0deg) scale(1);filter:hue-rotate(0deg)} 1% {border:1px solid #00000080} 75% {transform: translateX(1500px) rotate(360deg) scale(0);filter:hue-rotate(45deg)} 100% {transform: translateX(2000px) rotate(720deg) scale(0);filter:hue-rotate(90deg);display:none} }
.downdr1 { -moz-animation-duration:3s; -webkit-animation-duration:3s; animation-duration:3s; } .downdr2 { -moz-animation-duration:3.5s; -webkit-animation-duration:3.5s; animation-duration:3.5s; } .downdr3 { -moz-animation-duration:4s; -webkit-animation-duration:4s; animation-duration:4s; } .downdr4 { -moz-animation-duration:4.5s; -webkit-animation-duration:4.5s; animation-duration:4.5s; } .downdr0,.downdr1,.downdr2,.downdr3,.downdr4 {animation-fill-mode:forwards} @-moz-keyframes dndreh { 0% {transform: rotate(0deg);filter:hue-rotate(0deg) opacity(1);border-radius:0} 100% {transform: rotate(720deg) scale(2);filter:hue-rotate(90deg) opacity(0);border-radius:80px;display:none} } @-webkit-keyframes dndreh { 0% {transform: rotate(0deg);filter:hue-rotate(0deg) opacity(1);border-radius:0} 100% {transform: rotate(720deg) scale(2);filter:hue-rotate(90deg) opacity(0);border-radius:80px;display:none} } @keyframes dndreh { 0% {transform: rotate(0deg);filter:hue-rotate(0deg) opacity(1);border-radius:0} 100% {transform: rotate(720deg) scale(2);filter:hue-rotate(90deg) opacity(0);border-radius:80px;display:none} }
.downdr0 { -moz-animation-duration:1s; -webkit-animation-duration:1s; animation-duration:1s; } .downdr1 { -moz-animation-duration:2s; -webkit-animation-duration:2s; animation-duration:2s; } .downdr2 { -moz-animation-duration:3s; -webkit-animation-duration:3s; animation-duration:3s; } .downdr3 { -moz-animation-duration:4s; -webkit-animation-duration:4s; animation-duration:4s; } .downdr4 { -moz-animation-duration:5s; -webkit-animation-duration:5s; animation-duration:5s; } .downdr0,.downdr1,.downdr2,.downdr3,.downdr4 {animation-fill-mode:forwards} @-moz-keyframes dndreh { 0% {transform: rotate(0deg)} 20% {transform: rotate(360deg) scaleX(2) scaleY(0.25)} 100% {transform: translateX(2000px) rotate(360deg) scaleX(2) scaleY(0.25);display:none} } @-webkit-keyframes dndreh { 0% {transform: rotate(0deg)} 20% {transform: rotate(360deg) scaleX(2) scaleY(0.25)} 100% {transform: translateX(2000px) rotate(360deg) scaleX(2) scaleY(0.25);display:none} } @keyframes dndreh { 0% {transform: rotate(0deg)} 20% {transform: rotate(360deg) scaleX(2) scaleY(0.25)} 100% {transform: translateX(2000px) rotate(360deg) scaleX(2) scaleY(0.25);display:none} }