Butterfly with moving wings CSS snippet
The butterfly moves its wings at irregular intervals that repeat 6 times. Calculating the movement puts a lot of strain on the CPU. However, the viewer of the website will probably only watch the animation for a moment and then search for other content. The animation therefore does not repeat itself infinitely and the CPU is spared. With a shadow (filter: drop-shadow...) the animation would of course be even more beautiful, but that also eats up CPU.
See how it works
Get the code
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>
