Insect photography
Image-switching animations
with JavaScript and CSS
Seven-spot ladybird
Take-off
Ant
Harlequin ladybird
Shield bug
Bee
Thick-headed fly
Scarce chaser
Comma butterfly
Thistles
Dagger wasp
Gymnosoma rotundatum
Spotted longhorn beetle
Grasshopper
Bumblebee
Colorado potato beetle
Small tortoiseshell
Green bug nymph
True bug nymph
Common darter
Sympetrum vulgatum
Dragonfly head
Earwig
Caterpillar
Hoverfly
Striped shield bug
True bug
Soldier beetle
Meadow plant bug
Bee fly
Project:
insectoid.net
Projects
Works
Animations
Residual light
Flower Power
Insects
Znaniecki
Imprint
© 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} }