Animated clouds

In this example below you will see how to do a Animated clouds with some HTML / CSS and Javascript

CSS experiment with blur and contrast filters

Thumbnail
This awesome code was written by Elwin van den Hazel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Elwin van den Hazel ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animated clouds</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="cloud">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/elwinvdhazel/animated-clouds-YLVybw */
html,
body {
  height: 100%;
  width: 100%;
  background-color: blue;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-filter: contrast(20);
          filter: contrast(20);
  position: relative;
  background-color: blue;
}

.cloud {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  -webkit-filter: blur(0.5rem);
          filter: blur(0.5rem);
  -webkit-transform: skew(-10deg);
          transform: skew(-10deg);
}
.cloud .circle {
  width: 400px;
  height: 400px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  left: 0;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: scaleTransform 4s linear 0s infinite;
          animation: scaleTransform 4s linear 0s infinite;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.cloud .circle:nth-child(1) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.cloud .circle:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.cloud .circle:nth-child(3) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.cloud .circle:nth-child(4) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.cloud .circle:nth-child(5) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

@-webkit-keyframes scaleTransform {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
  }
  50% {
    -webkit-transform: translate3d(300px, 0, 0) scale(1);
            transform: translate3d(300px, 0, 0) scale(1);
  }
  100% {
    -webkit-transform: translate3d(600px, 0, 0) scale(0);
            transform: translate3d(600px, 0, 0) scale(0);
  }
}

@keyframes scaleTransform {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
  }
  50% {
    -webkit-transform: translate3d(300px, 0, 0) scale(1);
            transform: translate3d(300px, 0, 0) scale(1);
  }
  100% {
    -webkit-transform: translate3d(600px, 0, 0) scale(0);
            transform: translate3d(600px, 0, 0) scale(0);
  }
}

Comments