CSS animation examples – Blowing bubbles

The CSS bubble animation that options on 7UP could be a stunning example of carrying a complete theme through into the web site style.The animation consists of some elements: the SVG ‘drawing’ of the bubbles so 2 animations applied to every bubble.

The first animation changes the opacity of the bubble and moves it vertically within the read box; the second creates the unsteady impact for additional realism. The offsets are handled by targeting every bubble and applying a unique animation length and delay.

In order to make our bubbles, we’ll be mistreatment SVG. In our SVG we tend to produce 2 layers of bubbles: one for the larger bubbles and one for the smaller bubbles. within the SVG we tend to position all of our bubbles at rock bottom of the read box.

<g class="bubbles-large" stroke-width="7">
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
  ...
</g>
<g class="bubbles-small" stroke-width="4">
  <g transform="translate(147 984)">
  <circle cx="15" cy="15" r="15"/>
  </g>
</g>
  ...
</g>

In order to use 2 separate animations to our SVG, each utilizing the remodel property, we’d like to use the animations to separate parts. The part in SVG may be used very like a div in HTML; we’d like to wrap every one of our bubbles (which are already in a very cluster) in a very group tag.

<g>
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
</g>

CSS features a powerful animation engine and very straightforward code so as to supply advanced animations. We’ll begin with moving the bubbles up the screen and dynamical their opacity so as to fade them in and out at the start and finish of the animation.

@keyframes up {
  0% {
  opacity: 0;
  }
  10%, 90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  transform: translateY(-1024px);
  }
}

In order to make an unsteady impact, we tend to merely got to move (or translate) the bubble left and right, by simply the correct quantity – an excessive amount of can cause the animation to seem too jaunting and disconnected, whereas insufficient can go principally disregarded. Experimentation is essential with once operating with animation.

@keyframes wobble {
  33% {
  transform: translateX(-50px);
  }
  66% {
  transform: translateX(50px);
  } }

In order to use the animation to our bubbles, we tend to be mistreatment the teams we used earlier and also the facilities of nth-of-type to spot every bubble cluster one by one. we tend to begin by applying AN opacity worth to the bubbles and also the will-change property so as to apply hardware acceleration.

.bubbles-large > g {
  opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}

We want to stay all the animation times and delays among a handful of seconds of every alternative and set them to repeat infinitely. Lastly, we tend to apply the ease-in-out temporal arrangement perform to our wobble animation to form it look slightly a lot of natural.

.bubbles-large g:nth-of-type(1) {
  animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
  animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
  animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}

Demo | Download