Tutorial SVG animations: falling snowflakes

svg animation

Scalability of SVG shapes (being vector images) means that you can scale the shape or image without decreasing the quality of the image. In this tutorial we create several copies of the same SVG image shape, i.e. a falling ice crystal (or snowflake), btt wih different dimensions. The animation is done using CSS3 keyframe animations.

Check this example in your browser

De HTML


<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>SVG :: sneeuw animatie</title>
  <link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
  </head>
  <body >
  <img src="images//snowflake2.svg" alt="" class="flake" style="left:100px;top:-50px;width:130px;height:130px;" >
  <img src="images//snowflake2.svg" alt="" class="flake slow" style="left:200px;top:-120px; width:260px;height:260px; " >
  <img src="images//snowflake2.svg" alt="" class="flake" style="left:640px;top:125px; width:100px; height:100px;" >
  <img src="images//snowflake2.svg" alt="" class="flake" style="left:40px;top:-30px;width:90px; height:90px;" >
  <img src="images//snowflake2.svg" alt="" class="flake slow" style="left:50px;top:-35px; width:60px;height:60px; " >
  <img src="images//snowflake2.svg" alt="" class="flake" style="left:500px;top:-400px; width:120px; height:120px;" >
  <img src="images//snowflake2.svg" alt="" class="flake" style="left:400px; top:100px;width:65px;height:65px;" >
  <img src="images//snowflake2.svg" alt="" class="flake slow" style="left:455px;top:-70px; width:60px;height:60px; " >
  <img src="images//snowflake2.svg" alt="" class="flake" style="left:325px;top:-33px;width:120px; height:120px;" >
  </body>
  </html>

De CSS in articles_styles.css


@-webkit-keyframes snow{
  100% { top: 700px; -webkit-transform: rotate(2.2turn); }
  }
@-o-keyframes snow{
  100% { top: 700px; -o-transform: rotate(2.2turn); }
  }
@-ms-keyframes snow{
  100% { top: 700px; -ms-transform: rotate(2.2turn); }
  }
@-moz-keyframes snow{
  100% { top: 700px; -moz-transform: rotate(2.2turn); }
  }
@keyframes snow{
  100% { top: 700px; transform: rotate(2.2turn); }
  }
@-webkit-keyframes drift{
  0% { left: -5px; }
  25% { left: 55px; }
  55% { left: -15px; }
  100% { left: 0px;   }
  }
@-o-keyframes drift{
  0% { left: -5px; }
  25% { left: 55px; }
  55% { left: -15px; }
  100% { left: 0px; }
  }
@-ms-keyframes drift{
  0% { left: -5px; }
  25% { left: 55px; }
  55% { left: -15px; }
  100% { left: 0px; }
  }
@-moz-keyframes drift{
  0% { left: -5px; }
  25% { left: 55px; }
  55% { left: -15px; }
  100% { left: 0px; }
  }
@keyframes drift{
  0% { left: -5px; }
  25% { left: 55px; }
  55% { left: -15px; }
  100% { left: 0px; }
  }
html{ 
  min-height: 100%; 
  }
body{ 
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#b5d3ff), to(#30509a));
  background: -moz-linear-gradient(top, #b5d3ff 0%, #30509a 100%);
  background: -o-linear-gradient(top, #b5d3ff 0%, #30509a 100%);
  background: linear-gradient(top, #b5d3ff 0%, #30509a 100%);
  }
img.flake { 
  width: 150px; 
  height: 150px; 
  position: relative;
  -webkit-animation: snow 8s linear infinite forwards,drift 12s ease-in-out forwards infinite; 
  -moz-animation: snow 8s linear infinite forwards,drift 12s ease-in-out forwards infinite;
  -ms-animation: snow 8s linear infinite forwards,drift 12s ease-in-out forwards infinite;
  -o-animation: snow 8s linear infinite forwards,drift 12s ease-in-out forwards infinite;
  animation: snow 8s linear infinite forwards,drift 12s ease-in-out forwards infinite;
  }
img.slow {
  -webkit-animation: snow 12s linear infinite forwards,drift 18s ease-in-out forwards infinite;
  -moz-animation: snow 12s linear infinite forwards,drift 184s ease-in-out forwards infinite;
  -o-animation: snow 12s linear infinite forwards,drift 18s ease-in-out forwards infinite;
  animation: snow 12s linear infinite forwards,drift 18s ease-in-out forwards infinite;
  }

Een rechthoek in SVG formaat
Image1. Falling, rotating and deflecting SVG snowflakes

Leave a comment