Аним.фон only css 2

аним. фон только на css. Пример для портфолио №2.

by Denis Tverdokhlebov

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<body>

  <div class="background-linear"></div>

  <div class="wrapper">
    <div class="winter-wrapper">
      <div class="snow-wrapper big">
        <div class="snow-wrap">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
  ...

CSS

body{
	width: 100%;
	display: block;
	background: linear-gradient(#d2f0e6, #9ac8bb);
}
.background-linear{
	position: fixed;
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(#d2f0e6, #9ac8bb);
	z-index: 1;
}
.wrapper{
	position: relative;
	width: 100%;
	display: block;
	padding-top: 30px;
	padding-bottom: 30px;
	z-index: 2;
}
.winter-wrapper{
	position: relative;
	width: 600px;
	height: 450px;
	display: block;
	margin: 0 auto;
	z-index: 2;
	overflow: hidden;
}
.winter-wrap{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
    width: 100%;
	height: 100%;
	overflow: hidden;
}
.snow-wrapper{
	position: absolute;
	top: -900px;
	left: 0;
	width: 600px;
	height: 1350px;
	display: block;
	margin: 0 auto;
	z-index: 200;
	overflow: hidden;
	animation: moveSnow-one 18s linear infinite;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.snow-wrapper.big{
	top: -875px;
	left: 10px;
	animation: moveSnow-two 20s linear infinite;
}
@keyframes moveSnow-one {
  0% { 
		transform: translate(0, 0);  
  }
  25% { 
		transform: translate(-20px, 8.33333333333333%);  
  }
  50% { 
		transform: translate(-40px, 16.6666666666666%);  
  }
  75% { 
		transform: translate(-20px, 24.99999999999999%);  
  }
  100% { 
		transform: translate(0, 33.333333333333%);  
  }
}
@keyframes moveSnow-two {
  0% { 
		transform: translate(0, 0);  
  }
  25% { 
		transform: translate(15px, 8.33333333333333%);  
  }
  50% { 
		transform: translate(30px, 16.6666666666666%);  
  }
  75% { 
		transform: translate(15px, 24.99999999999999%);  
  }
  100% { 
		transform: translate(0, 33.333333333333%);  
  }
}
.snow-wrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 450px;
	display: block;
	margin: 0 auto;
	z-index: 1;
	overflow: hidden;
}
.snow-wrap.snd{
	top: 450px;
}
.snow-wrap.trd{
	top: 900px;
}
.snow-wrapper.big .snow-wrap span{
	width: 3px;
	height: 3px;
}
.snow-wrap span{
	position: absolute;
	top: 20px;
	left: 20px;
	width:...