🌞
:doodle {
@grid:15/ 100%;
width:100vw;
height:100vh;
}
:container {
transform-style:flat;
}
:after {
content:@p(🦋);
}
@random(.15) {
filter:hue-rotate(@r(-180deg, 180deg));
}
animation: fly @r(10s, 20s) infinite linear;
will-change:transform;
position:absolute;
left:@r(100%);/*butterfly starting pos*/
bottom:@r(75px, 250px);/*tree height is up to 250px*/
@keyframes fly {
0% {
transform:
translateX(@r(-20px, 20px))
translateY(@r(-20px, 20px));
}
33% {
transform:
translateX(calc(@p(-1,1)*@r(20)*@p(1vmax)))
translateY(calc(-1*@r(40)*1vmax))
rotateY(@r(15turn, 25turn))
rotateZ(@r(-.05turn, .05turn));
}
66% {
transform:
translateX(calc(@p(-1,1)*@r(20)*@p(1vmax)))
translateY(calc(-1*@r(30,60)*1vmax))
rotateY(@r(35turn, 45turn))
rotateZ(@r(-.05turn, .05turn));
}
100% {
transform:
translateX(calc(@p(-1,1,1)*@r(40)*1vmax))
translateY(calc(-100*1vmax))
rotateY(@r(55turn, 70turn))
rotateZ(@r(-.05turn, .05turn))
;
}
}