The Power of Pure CSS - No JavaScript Needed

@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;
}

56

Wave Animation Using .png

By: pixeldev

<div class="pricing-table clearfix">
	<ul class="highlight-low">
		<li class="heading">Free</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
	</ul>
	<ul class="highlight-high">
		<li class="heading">Premium</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
  </ul>
	<ul class="highlight-medium">
		<li class="heading">Free</li>
		<li class="price">$0/mo</li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="feature"><span>Some feature</span></li>
		<li class="call-to-action">Buy Now</li>
	</ul>
</div>

.pricing-table {
  width: 700px;
  margin: 30px auto 30px auto;
  font-family:"Arial";
}
.pricing-table ul {
  width: 33%;
  text-align: center;
  background: #fff;
  float: left;
  margin: 0px;
  padding: 0px;
  list-style: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
  position: relative;
}
.pricing-table ul.highlight-low {
  margin-right: -5px;
}
.pricing-table ul.highlight-low .heading {
  font-size: 22px;
  padding: 15px 0;
  border: 5px solid #cfcfcf;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #e3e3e3;
  background-image: -moz-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#cfcfcf));
  background-image: -webkit-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: -o-linear-gradient(top, #f0f0f0, #cfcfcf);
  background-image: linear-gradient(to bottom, #f0f0f0, #cfcfcf);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f0f0', endColorstr='#ffcfcfcf', GradientType=0);
}
.pricing-table ul.highlight-low .price {
  background: #dfe9f0;
  border-left: 5px solid #cfcfcf;
  border-right: 5px solid #cfcfcf;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-low .feature {
  border-left: 5px solid #cfcfcf;
  border-right: 5px solid #cfcfcf;
}
.pricing-table ul.highlight-low .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-low .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-low .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #cfcfcf;
  border-top: 0px;
  padding: 15px 0;
  font-size: 22px;
}
.pricing-table ul.highlight-high {
  z-index: 100;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  margin-top: -12px;
}
.pricing-table ul.highlight-high .heading {
  font-size: 22px;
  padding: 24px 0;
  border: 5px solid #21507d;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #2c5d8e;
  background-image: -moz-linear-gradient(top, #336699, #21507d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#336699), to(#21507d));
  background-image: -webkit-linear-gradient(top, #336699, #21507d);
  background-image: -o-linear-gradient(top, #336699, #21507d);
  background-image: linear-gradient(to bottom, #336699, #21507d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff336699', endColorstr='#ff21507d', GradientType=0);
  color: #fff;
}
.pricing-table ul.highlight-high .price {
  background: #dfe9f0;
  border-left: 5px solid #21507d;
  border-right: 5px solid #21507d;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-high .feature {
  border-left: 5px solid #21507d;
  border-right: 5px solid #21507d;
}
.pricing-table ul.highlight-high .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-high .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-high .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #21507d;
  border-top: 0px;
  padding: 24px 0;
  font-size: 22px;
}
.pricing-table ul.highlight-medium {
  margin-left: -5px;
}
.pricing-table ul.highlight-medium .heading {
  font-size: 22px;
  padding: 15px 0;
  border: 5px solid #589f0c;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: #6abc12;
  background-image: -moz-linear-gradient(top, #76cf16, #589f0c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#76cf16), to(#589f0c));
  background-image: -webkit-linear-gradient(top, #76cf16, #589f0c);
  background-image: -o-linear-gradient(top, #76cf16, #589f0c);
  background-image: linear-gradient(to bottom, #76cf16, #589f0c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff76cf16', endColorstr='#ff589f0c', GradientType=0);
  color: #fff;
}
.pricing-table ul.highlight-medium .price {
  background: #dfe9f0;
  border-left: 5px solid #589f0c;
  border-right: 5px solid #589f0c;
  font-size: 20px;
  padding: 15px 0;
}
.pricing-table ul.highlight-medium .feature {
  border-left: 5px solid #589f0c;
  border-right: 5px solid #589f0c;
}
.pricing-table ul.highlight-medium .feature span {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  margin: 0 10px;
  display: block;
  font-size: 90%;
}
.pricing-table ul.highlight-medium .feature:nth-last-child(2) span {
  border-bottom: 0px !important;
}
.pricing-table ul.highlight-medium .call-to-action {
  background: #f0f0f0;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 5px solid #589f0c;
  border-top: 0px;
  padding: 15px 0;
  font-size: 22px;
}

56

Pure CSS Pricing Table

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);
    }
}

56

Waves animation Pure CSS

By: pixeldev

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; }
}

55

Wavy Grass

By: pixeldev

55

Navigation list underline with animated pure css

By: pixeldev

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");

body {
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 50px;
  text-align: center;
  font-weight: 300;
  color: #777;
  margin-bottom: 0;
}

h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 16px;
  color: #bbb;
}

.icons {
  font-size: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon {
  display: inline-block;
  width: 40px;
  height: 50px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin: 0 5px;
}

.icon::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-radius: 0 2px;
  transition: all 0.2s linear;
  backface-visibility: hidden;
}

/* DOC */
.icon--doc {
  background-color: #4285f4;
}
.icon--doc::after {
  background: linear-gradient(45deg, #669df6 50%, #fff 50%);
}
.icon--doc i::before {
  content: '☰';
}

/* PDF */
.icon--pdf {
  background-color: #db4437;
}
.icon--pdf::after {
  background: linear-gradient(45deg, #e36a60 50%, #fff 50%);
}
.icon--pdf i::before {
  content: '☵';
}

/* SHEETS */
.icon--sheets {
  background-color: #0f9d58;
}
.icon--sheets::after {
  background: linear-gradient(45deg, #39b378 50%, #fff 50%);
}
.icon--sheets i::before {
  content: '⊟';
}

/* SLIDES */
.icon--slides {
  background-color: #f5b707;
}
.icon--slides::after {
  background: linear-gradient(45deg, #f8c53f 50%, #fff 50%);
}
.icon--slides i::before {
  content: '⧉';
}

/* CODE */
.icon--code {
  background-color: #00a78e;
}
.icon--code::after {
  background: linear-gradient(45deg, #26bfa6 50%, #fff 50%);
}
.icon--code i::before {
  content: '< >';
}

.icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font-size: 10px;
  color: #fff;
  font-weight: 500;
}

.icon i::before,
.icon i::after {
  display: block;
  transition: all 0.2s linear;
}

.icon i::before {
  text-align: center;
  font-size: 12px;
  opacity: 0;
  transform: translateY(5px);
}

.icon i::after {
  content: attr(title);
  transform: translateY(-5px);
}

.icon:hover {
  border-radius: 2px 4px 2px 2px;
}

.icon:hover::after {
  width: 12px;
  height: 12px;
}

.icon:hover i::before {
  transform: translateY(0);
  opacity: 1;
}

.icon:hover i::after {
  transform: translateY(0);
}

55

Pure CSS – File icons with hover animation

By: pixeldev

54

Pure css close button animation

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);
  }
}

54

Pure Css Wave Progress bar

By: pixeldev

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

article:nth-of-type(1){
  animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
  animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
  animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
  animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
  animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
  animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
  animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

54

Pure CSS Image Slider

By: pixeldev

<details>
  <summary>Item 1</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>
<details>
  <summary>Item 2</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>
<details>
  <summary>Item 3</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>

html, body {color: #fff; background-color: #131417; padding: 15px;}

$fluent-timing: cubic-bezier(.16,1,.29,.99);

@mixin bezier-trans($style: all) {
  $style: unquote($style);
  transition-property: $style;
  transition-duration: .4s;
  transition-timing-function: $fluent-timing;
}

@keyframes fontSizeIn {
	0% {
    font-size: 0;
    opacity: 0;
	}

100% {
    font-size: initial;
    opacity: 0; 
	}
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

100% {
		opacity: 1;
	}
}

details {
  width: 750px;
  margin: auto;

+ details {
    margin-top: 15px;
  }

::-webkit-details-marker {
    display: none; // Hide marker for Blink and Webkit
  }

summary {
    list-style-type: none; // Hide marker for Gecko
    cursor: pointer;
    padding: 5px;

&::after {
      content: "\f107";
      font-family: "Font Awesome 5 Pro";
      display: block;
      float: right;

@include bezier-trans();
    }

+ div {
      margin-top: 10px;
      padding: 5px;
    }
  }

&[open] {
    summary::after {
      transform: rotate(180deg);
    }
 
    div {
      animation-name: fontSizeIn, fadeIn;
      animation-duration: 160ms, 160ms;
      animation-delay: 0ms, 160ms;
    }
  }
}

52

Pure CSS Animated Accordion

By: pixeldev

50

Hover Effect Border

By: pixeldev

* {
  box-sizing: border-box;
}
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #ffcb05;
}
.pokeball {
  display: block;
  width: 192px;
  height: 192px;
  background: radial-gradient(
      white 16px,
      black 17px 18px,
      white 19px 24px,
      black 25px 32px,
      transparent 33px
    ),
    linear-gradient(to bottom, red 0 80px, black 81px 96px, white 97px 100%);
  border-radius: 50%;
  border: 8px solid black;
  box-shadow: inset -16px -8px 0 0 rgba(0, 0, 0, 0.2);
  animation: fall 0.5s ease-in-out 1s,
    shake 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1.5s 3,
    catch 0.5s ease-out 5.25s forwards;
}
/* Animation */
@keyframes shake {
  0% {
    transform: translateX(0) rotate(0);
  }
  20% {
    transform: translateX(-10px) rotate(-20deg);
  }
  30% {
    transform: translateX(10px) rotate(20deg);
  }
  50% {
    transform: translateX(-10px) rotate(-10deg);
  }
  60% {
    transform: translateX(10px) rotate(10deg);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}
@keyframes fall {
  0% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes catch {
  to {
    filter: saturate(0.8) brightness(0.8);
  }
}

50

All

Wave Animation Using .png

By: pixeldev

Pure CSS Pricing Table

By: pixeldev

Waves animation Pure CSS

By: pixeldev

Wavy Grass

By: pixeldev

Navigation list underline with animated pure css

By: pixeldev

Pure CSS – File icons with hover animation

By: pixeldev

Pure css close button animation

By: pixeldev

Pure Css Wave Progress bar

By: pixeldev

Pure CSS Image Slider

By: pixeldev

Pure CSS Animated Accordion

By: pixeldev

Hover Effect Border

By: pixeldev

Pokeball Caught Animation

By: pixeldev