Macro shots of flowers
Image-switching animations
with JavaScript and CSS
Image #1
Image #2
Image #3
Image #4
Image #5
Image #6
Image #7
Image #8
Image #9
Image #10
Image #11
Image #12
Image #13
Image #14
Image #15
Image #16
Image #17
Image #18
Image #19
Image #20
Image #21
Image #22
Image #23
Image #24
Image #25
Image #26
Image #27
Image #28
Image #29
Image #30
Image #31
Image #32
Image #33
Image #34
Image #35
Image #36
Image #37
Image #38
Image #39
Image #40
Image #41
Image #42
Image #43
Image #44
Image #45
Image #46
Image #47
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} }