Ein Schmetterling mit animierten Flügeln CSS snippet
Der Schmetterling bewegt seine Flügel in unregelmäßigen Abständen, die sich sechsmal wiederholen. Da die Berechnung der Bewegung hohe Auswirkungen auf den CPU hat, wird die Animation nicht endlos wiederholt. Mit einem Schatten (Filter: Drop-Shadow...) wäre die Animation natürlich noch schöner, aber das frisst leider auch CPU.
So sieht der Schmetterling aus
Der Quellcode
CSS
html{
scroll-behavior: smooth;
will-change: transform;
}
.moving {
width:200px;
height:150px;
margin:auto;
padding:50px;
overflow:visible;
transform:rotate(-10deg);
}
.butterfly {
position:relative;
width:100%;
height:130%;
display: flex;
perspective: 290px;
}
img{
width:100%;
height:auto;
}
.b-body{
z-index: 2;
}
.wing-l{
margin-right: -21%;
}
.wing-r{
margin-left: -22%;
}
.wing-l, .wing-r{
transform-origin: 0% center;
transform-box: fill-box;
transform-style: preserve-3d;
animation-timing-function: cubic-bezier(.18,-0.05,.57,.95);
animation-iteration-count: 6;
animation-duration:20s;
z-index: 1;
}
.wing-l{
animation-name: movel;
transform-origin: 100% bottom;
}
.wing-r{
animation-name: mover;
transform-origin: 0% bottom;
}
@keyframes movel{
0%{transform: rotatey(0deg);}
5%{transform: rotatey(45deg);}
10%{transform: rotatey(0deg);}
15%{transform: rotatey(45deg);}
20%{transform: rotatey(0deg);}
30%{transform: rotatey(0deg);}
35%{transform: rotatey(45deg);}
40%{transform: rotatey(0deg);}
60%{transform: rotatey(0deg);}
65%{transform: rotatey(45deg);}
70%{transform: rotatey(0deg);}
80%{transform: rotatey(0deg);}
85%{transform: rotatey(45deg);}
90%{transform: rotatey(0deg);}
100%{transform: rotatey(0deg);}
}
@keyframes mover{
0%{transform: rotatey(0deg);}
5%{transform: rotatey(-45deg);}
10%{transform: rotatey(0deg);}
15%{transform: rotatey(-45deg);}
20%{transform: rotatey(0deg);}
30%{transform: rotatey(0deg);}
35%{transform: rotatey(-45deg);}
40%{transform: rotatey(0deg);}
60%{transform: rotatey(0deg);}
65%{transform: rotatey(-45deg);}
70%{transform: rotatey(0deg);}
80%{transform: rotatey(0deg);}
85%{transform: rotatey(-45deg);}
90%{transform: rotatey(0deg);}
100%{transform: rotatey(0deg);}
}
HTML
<div class="moving">
<div class="butterfly">
<div class="wing-l"><img src="butterfly/wing-l.png"></div>
<div class="b-body"><img src="butterfly/body.png"></div>
<div class="wing-r"><img src="butterfly/wing-r.png"></div>
</div>
</div>
