Exp: Star Animation CSS-DOODLE
:doodle {
@grid: 33 / 100vmax;
}
:after {
animation: star @r(7s, 12s) infinite alternate;
content: \2605;
color: hsla(@r(174, 286), @r(100%, 77%), @r(100%, 46%), @r(0, .9));
font-size: @r(3vmin);
filter: blur(@r(0, 5px));
position: relative;
transition: .3s linear;
}
@keyframes star {
0% { transform: rotate(@r(0deg, 360deg)) scale(@r(1.3, .25)) translate(@r(-25vmin, 15vmin), @r(-25vmin, 15vmin)); }
100% { transform: rotate(@r(0deg, 360deg)) scale(@r(.25, 1.3)) translate(@r(-5vmin, 5vmin), @r(-5vmin, 5vmin)); }
}