Flying birds – CSS animation examples

We begin with fully straight vector lines, drawing every frame of our animation, portrayal the bird in a very totally different state of flight. we have a tendency to then manipulate the vector points and around the lines and edges. Finally, we have a tendency to place every frame into AN equally sized box and place them side-by-side. Export the file as AN SVG.

The hypertext markup language setup is basically straightforward. we have a tendency to simply got to wrap every bird in a very instrumentation so as to use multiple animations – one to create the birds fly and also the alternative to maneuver it across the screen.

<div class="bird-container">
 <div class="bird"></div>
</div>

We apply our bird SVG because of the background to our bird div and select the dimensions we would like every frame to be. we have a tendency to use the dimension to roughly calculate the new background position. The SVG has ten cells, thus we have a tendency to multiply our dimension by ten and so alter the quantity slightly till it’s correct.

.bird {
  background-image: url('bird.svg');
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
}
@keyframes fly-cycle {
  100% {
  background-position: -900px 0;
  } 
}

CSS animation encompasses a few tricks you’ll not remember of. we will use the animation-timing-function to indicate the image in steps – very similar to flicking through pages in a very notebook to suggest to animation.

animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;

Now we’ve created our fly cycle, our bird is presently fluttering her wings, however, isn’t going anyplace. so as to maneuver her across the screen, we have a tendency to produce another keyframe animation. This animation can move the bird across the screen horizontally whereas additionally dynamic the vertical position and also the scale to permit the bird to meander across additional realistically.

Once we’ve created our animations, we have a tendency to merely got to apply them. we will produce multiple copies of our bird and apply totally different animation times and delays.

.bird--one {
  animation-duration: 1s;
  animation-delay: -0.5s;
}
.bird--two {
  animation-duration: 0.9s;
  animation-delay: -0.75s;
}

Demo | Download