The Power of Pure CSS - No JavaScript Needed

44

Wave-loader Animation Pure css

body {
	font-family: 'Montserrat', sans-serif;
}
.textContainer {
	width: 100%;
	height: 100vh;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}
h1 {
	position: relative;
	text-transform: uppercase;
	font-size: 50px;
	letter-spacing: 2px;
	margin-bottom: 20px;
	color: red;
	justify-content: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
span {
	display: inline-block; 
	position: relative; 
}
.bouncingAnim {
	justify-content: center;
	align-items: flex-end;
}
.bouncingAnim span.ml_25 {margin-left: 25px;}
.bouncingAnim span:nth-child(1) {animation: bounce 2.3s ease-in-out infinite; }
.bouncingAnim span:nth-child(2) {animation: bounce 2.3s ease-in-out .33s infinite; }
.bouncingAnim span:nth-child(3) {animation: bounce 2.3s ease-in-out 0.66s infinite; }
.bouncingAnim span:nth-child(4) {animation: bounce 2.3s ease-in-out 0.99s infinite; }
.bouncingAnim span:nth-child(5) {animation: bounce 2.3s ease-in-out 1.33s infinite; }
.bouncingAnim span:nth-child(6) {animation: bounce 2.3s ease-in-out 1.66s infinite; }
.bouncingAnim span:nth-child(7) {animation: bounce 2.3s ease-in-out 1.99s infinite; }
.bouncingAnim span:nth-child(8) {animation: bounce 2.3s ease-in-out 2.33s infinite; }
.bouncingAnim span:nth-child(9) {animation: bounce 2.3s ease-in-out 2.66s infinite; }
.bouncingAnim span:nth-child(10) {animation: bounce 2.3s ease-in-out 2.99s infinite; }

@-webkit-keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

25%{
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
    opacity: .5;
  }
}
@keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

25%{
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
    opacity: .5;
  }
}

16

Wave Text Animation Pure CSS

By: pixeldev

html,body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#FFCDD2, #F48FB1);
}

.👋 {
    width: 400px;
    height: 400px;
    background-color: whitesmoke;
    background-image: linear-gradient(
        darkblue,
        rgba(255, 255, 255, 0) 80%,
        rgba(255, 255, 255, 0.5)
    );
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow:hidden;
}

.👋 .title {
    color: white;
    font-size: 24px;
    font-family: serif;
    text-align: center;
    text-transform: uppercase;
    line-height: 250px;
    letter-spacing: 0.4em;
    z-index: 1;
    position: absolute;
    width: 100%;
}

.👋 .wave {
    width: 600px;
    height: 600px;
    position: absolute;
    background-color: #039BE5;
    top: -250px;
    left: -100px;
    filter: opacity(0.4);
    border-radius: 43%;
    animation: drift linear infinite;
    transform-origin: 50% 48%;
}
.sp{
   width:100px;
   height:100px;
   background-color:red;
}
.👋 .wave:nth-of-type(1) {
    animation-duration: 5s;
}

.👋 .wave:nth-of-type(2) {
    animation-duration: 7s;
}

.👋 .wave:nth-of-type(3) {
    animation-duration: 9s;
    background-color: red;
    filter: opacity(0.1);
}

@keyframes drift {
    from {
        transform: rotate(360deg);
    }
}

15

Waves animation Pure CSS

By: pixeldev

.container {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid rgb(118, 218, 255);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}

.wave {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgb(118, 218, 255);
  border-radius: 50%;
}

.wave::before,
.wave::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  top: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45%;
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 6s linear infinite;
  z-index: 1;
}

.wave::after {
  border-radius: 47%;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 10s linear -5s infinite;
  z-index: 2;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #000;
  z-index: 10;
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}

14

Pure Css Wave Progress bar

By: pixeldev

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #D97A2B 20%, #C44A3A 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

13

Wave Animation Using .png

By: Nethan Pogi

<div class="cloudcontain1">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  <div class="cloudcontain2">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  <div class="cloudcontain3">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  <div class="cloudcontain4">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  
  <div class="blade1"></div>
  <div class="blade2"></div>
  <div class="blade3"></div>
  <div class="blade4"></div>
  <div class="blade5"></div>
  <div class="blade6"></div>
  <div class="blade7"></div>
  <div class="blade8"></div>
  <div class="blade9"></div>
  <div class="blade10"></div>
  <div class="blade11"></div>
  <div class="blade12"></div>
  <div class="blade13"></div>
  <div class="blade14"></div>
  <div class="blade15"></div>
  <div class="blade16"></div>
  <div class="blade17"></div>
  <div class="blade18"></div>
  <div class="blade19"></div>
  <div class="blade20"></div>
  <div class="blade21"></div>
  <div class="blade22"></div>
  <div class="blade23"></div>
  <div class="blade24"></div>
  <div class="blade25"></div>
  <div class="blade26"></div>
  <div class="blade27"></div>
  <div class="blade28"></div>
  <div class="blade29"></div>
  <div class="blade30"></div>
  <div class="blade31"></div>
  <div class="blade32"></div>
  <div class="blade33"></div>
  <div class="blade34"></div>
  <div class="blade35"></div>
  <div class="blade36"></div>
  <div class="blade37"></div>
  <div class="blade38"></div>
  <div class="blade39"></div>
  <div class="blade40"></div>
  <div class="blade41"></div>
  <div class="blade42"></div>
  <div class="blade43"></div>
  <div class="blade44"></div>
  <div class="blade45"></div>
  
  <div class="blade1b"></div>
  <div class="blade2b"></div>
  <div class="blade3b"></div>
  <div class="blade4b"></div>
  <div class="blade5b"></div>
  <div class="blade6b"></div>
  <div class="blade7b"></div>
  <div class="blade8b"></div>
  <div class="blade9b"></div>
  <div class="blade10b"></div>
  <div class="blade11b"></div>
  <div class="blade12b"></div>
  <div class="blade13b"></div>
  <div class="blade14b"></div>
  <div class="blade15b"></div>
  <div class="blade16b"></div>
  <div class="blade17b"></div>
  <div class="blade18b"></div>
  <div class="blade19b"></div>
  <div class="blade20b"></div>
  <div class="blade21b"></div>
  <div class="blade22b"></div>
  <div class="blade23b"></div>
  <div class="blade24b"></div>
  <div class="blade25b"></div>
  <div class="blade26b"></div>
  <div class="blade27b"></div>
  <div class="blade28b"></div>
  <div class="blade29b"></div>
  <div class="blade30b"></div>
  <div class="blade31b"></div>
  <div class="blade32b"></div>
  <div class="blade33b"></div>
  <div class="blade34b"></div>
  <div class="blade35b"></div>
  <div class="blade36b"></div>
  <div class="blade37b"></div>
  <div class="blade38b"></div>
  <div class="blade39b"></div>
  <div class="blade40b"></div>
  <div class="blade41b"></div>
  <div class="blade42b"></div>
  <div class="blade43b"></div>
  <div class="blade44b"></div>
  <div class="blade45b"></div>
  
  <div class="sand"></div>

body {
  background: -webkit-linear-gradient(45deg, rgba(242,249,255,1) 0%,rgba(64,150,238,1) 100%); 
  overflow: hidden;
}

.sand {
  background: #FFDEAA;
  width: 100%;
  height: 10px;
  bottom: 0;
  position: absolute;
  z-index: 5;
}

.cloudcontain1 {
  top: 250px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove1 55s infinite; 
  animation: cloudmove1 55s infinite;
  position: absolute;
  opacity: .7;
}

@-webkit-keyframes cloudmove1 {
    0%   {left: 0;}
    100% {left: 1200px;}
}

@keyframes cloudmove1 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloudcontain2 {
  top: 75px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove2 40s infinite; 
  animation: cloudmove2 40s infinite;
  position: absolute;
  -webkit-animation-delay: -16s;
  animation-delay: -16s;
  opacity: .3;
}

@-webkit-keyframes cloudmove2 {
    0%   {left: 0;}
    100% {left: 100%;}
}

@keyframes cloudmove2 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloudcontain3 {
  top: 320px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove3 47s infinite; 
  animation: cloudmove3 47s infinite;
  position: absolute;
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
  opacity: .6;
}

@-webkit-keyframes cloudmove3 {
    0%   {left: 0;}
    100% {left: 100%;}
}

@keyframes cloudmove3 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloudcontain4 {
  top: 400px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove4 41s infinite; 
  animation: cloudmove4 41s infinite;
  position: absolute;
  -webkit-animation-delay: -13s;
  animation-delay: -13s;
  opacity: .6;
}

@-webkit-keyframes cloudmove4 {
    0%   {left: 0;}
    100% {left: 100%;}
}

@keyframes cloudmove4 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloud1 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: white;
    position :absolute;
    z-index: 1;
    margin: 15px;
}

.cloud2 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: white;
    position :absolute;
    z-index: 2;
    margin: 45px;
}

.cloud3 {
    width: 75px;
    height: 75px;
    border-radius: 45px;
    background: white;
    position :absolute;
    z-index: 3;
    margin: 0px;
    top: 50px;
}

/*Front Row*/

.blade1, .blade2, .blade3, .blade4, .blade5, 
.blade6, .blade7, .blade8, .blade9, .blade10, 
.blade11, .blade12, .blade13, .blade14, .blade15, 
.blade16, .blade17, .blade18, .blade19, .blade20, 
.blade21, .blade22, .blade23, .blade24, .blade25, 
.blade26, .blade27, .blade28, .blade29, .blade30, 
.blade31, .blade32, .blade33, .blade34, .blade35,
.blade36, .blade37, .blade38, .blade39, .blade40, 
.blade41, .blade42, .blade43, .blade44, .blade45{
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 55px solid #156A32;
    position: absolute;
    -webkit-animation: mymove 5s infinite;  
    animation: mymove 5s infinite;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    z-index: 7;
    bottom: 0px;
}

.blade1 {left: 0px;}
.blade2 {left: 25px;}
.blade3 {left: 50px;}
.blade4 {left: 75px;}
.blade5 {left: 100px;}
.blade6 {left: 125px;}
.blade7 {left: 150px;}
.blade8 {left: 175px;}
.blade9 {left: 200px;}
.blade10 {left: 225px;}
.blade11 {left: 250px;}
.blade12 {left: 275px;}
.blade13 {left: 300px;}
.blade14 {left: 325px;}
.blade15 {left: 350px;}
.blade16 {left: 375px;}
.blade17 {left: 400px;}
.blade18 {left: 425px;}
.blade19 {left: 450px;}
.blade20 {left: 475px;}
.blade21 {left: 500px;}
.blade22 {left: 525px;}
.blade23 {left: 550px;}
.blade24 {left: 575px;}
.blade25 {left: 600px;}
.blade26 {left: 625px;}
.blade27 {left: 650px;}
.blade28 {left: 675px;}
.blade29 {left: 700px;}
.blade30 {left: 725px;}
.blade31 {left: 750px;}
.blade32 {left: 775px;}
.blade33 {left: 800px;}
.blade34 {left: 825px;}
.blade35 {left: 850px;}
.blade36 {left: 875px;}
.blade37 {left: 900px;}
.blade38 {left: 925px;}
.blade39 {left: 950px;}
.blade40 {left: 975px;}
.blade41 {left: 1000px;}
.blade42 {left: 1025px;}
.blade43 {left: 1050px;}
.blade44 {left: 1075px;}
.blade45 {left: 1100px;}

@-webkit-keyframes mymove {
    0%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #156A32; }
    25% {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #156A32; }
    50% {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #156A32; }
    75%   {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #156A32; }
    100%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #156A32; }
}

/*Back Row*/

.blade1b, .blade2b, .blade3b, .blade4b, .blade5b,
.blade6b, .blade7b, .blade8b, .blade9b, .blade10b,
.blade11b, .blade12b, .blade13b, .blade14b, .blade15b,
.blade16b, .blade17b, .blade18b, .blade19b, .blade20b,
.blade21b, .blade22b, .blade23b, .blade24b, .blade25b,
.blade26b, .blade27b, .blade28b, .blade29b, .blade30b,
.blade31b, .blade32b, .blade33b, .blade34b, .blade35b,
.blade36b, .blade37b, .blade38b, .blade39b, .blade40b, 
.blade41b, .blade42b, .blade43b, .blade44b, .blade45b {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 55px solid #1E4018;
    position: absolute;
    -webkit-animation: mymoveb 5s infinite;  
    animation: mymoveb 5s infinite;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    z-index: 5;
    bottom: 0px;
}

.blade1b {left: 15px;}
.blade2b {left: 35px;}
.blade3b {left: 65px;}
.blade4b {left: 85px;}
.blade5b {left: 115px;}
.blade6b {left: 135px;}
.blade7b {left: 165px;}
.blade8b {left: 185px;}
.blade9b {left: 215px;}
.blade10b {left: 235px;}
.blade11b {left: 265px;}
.blade12b {left: 285px;}
.blade13b {left: 315px;}
.blade14b {left: 335px;}
.blade15b {left: 365px;}
.blade16b {left: 385px;}
.blade17b {left: 415px;}
.blade18b {left: 435px;}
.blade19b {left: 465px;}
.blade20b {left: 485px;}
.blade21b {left: 515px;}
.blade22b {left: 535px;}
.blade23b {left: 565px;}
.blade24b {left: 585px;}
.blade25b {left: 615px;}
.blade26b {left: 635px;}
.blade27b {left: 665px;}
.blade28b {left: 685px;}
.blade29b {left: 715px;}
.blade30b {left: 735px;}
.blade31b {left: 765px;}
.blade32b {left: 785px;}
.blade33b {left: 815px;}
.blade34b {left: 835px;}
.blade35b {left: 865px;}
.blade36b {left: 885px;}
.blade37b {left: 915px;}
.blade38b {left: 935px;}
.blade39b {left: 965px;}
.blade40b {left: 985px;}
.blade41b {left: 1015px;}
.blade42b {left: 1035px;}
.blade43b {left: 1065px;}
.blade44b {left: 1085px;}
.blade45b {left: 1115px;}

@-webkit-keyframes mymoveb {
    0%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    25% {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    50% {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    75%   {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    100%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #1E4018; }
}

12

Wavy Grass

By: pixeldev

:root {
  --bg-color: #fff;
  --wave-color: #2c3e50;
  --animation-time: 8s;
  --max-height: 200px;
  --circle-offset: -1.5%;
  --wave-width: 55%;
  --height-wave-up: 109%;
  --height-wave-down: 100%;
  --top-wave-up: 60%;
  --top-wave-down: 40%;
  --border-radius-right-up: 100% 50%;
  --border-radius-left-up: 50% 100%; 
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--wave-color);
}

.container {
  position: relative;
  height: 50vh;
  background: var(--bg-color);
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--max-height);
  background: var(--bg-color);
  animation: beWavy var(--animation-time) infinite linear;
}

.wave::before, .wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: var(--border-radius-right-up);
  width: var(--wave-width);
}

.wave::before {
  height: var(--height-wave-up);
  background-color: var(--wave-color);
  right: var(--circle-offset);
  top: var(--top-wave-up);
  animation: beWavyBefore var(--animation-time) infinite step-end;
}
.wave::after {
  height: var(--height-wave-down);
  background-color: var(--bg-color);
  left: var(--circle-offset);
  top: var(--top-wave-down);
  animation: beWavyAfter var(--animation-time) infinite step-end;
}

@keyframes beWavy {
  0% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  25% {
    animation-timing-function: ease-out;
    height: 0;
  }
  50% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  75% {
    animation-timing-function: ease-out;
    height: 0;
  }
  100% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
}

@keyframes beWavyBefore {
  25% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-right-up);
  }
}

@keyframes beWavyAfter {
  25% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-right-up);
  }
}

12

Wave

Pendulum Wave

By: pixeldev

Wave-loader Animation Pure css

By: pixeldev

Wave Text Animation Pure CSS

By: pixeldev

Waves animation Pure CSS

By: pixeldev

Pure Css Wave Progress bar

By: pixeldev

Wave Animation Using .png

By: Nethan Pogi

Wavy Grass

By: pixeldev

Pure CSS Animated Wave

By: pixeldev