The Power of Pure CSS - No JavaScript Needed

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

/* OTHER STYLES */

body {
  background-color: #3b404e;
  display: flex;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.item {
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: #ffffff;
  border-radius: 4px;
  border: 6px solid #171717;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header {
  background-color: #1EAAFC;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

.sidebar {
  background-image: linear-gradient(203deg, #3EDFD7 0%, #29A49D 90%)
}

.content-1,
.content-2,
.content-3 {
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
}

.footer {
  background-color: #6C52D9;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

41

CSS Grid Layout – with color

By: pixeldev

.wrapper {
	margin: 50px;
	width: 300px;
	height: 300px;
	overflow: hidden;
	position:relative
}

.right {
	border: #3f85a3 solid 15px;
	height: 125px;
	width: 125px;
	border-radius:120px;
	border-top-color: transparent;
	border-left-color: transparent;
	position: absolute;
	transform: rotate(-45deg);
	animation: rota2 1000ms linear;
  -moz-animation: rota2 1000ms linear;
  -o-animation: rota2 1000ms linear;
  -webkit-animation: rota2 1000ms linear;
}

@keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-o-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-moz-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}
@-webkit-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

.left {
	border: #3f85a3 solid 15px;
	height: 125px;
	width: 125px;
	border-radius:120px;
	border-bottom-color: transparent;
	border-right-color: transparent;
	position: absolute;
	transform: rotate(315deg);
	animation: rota 2000ms linear;
  -o-animation: rota 2000ms linear;
  -moz-animation: rota 2000ms linear;
  -webkit-animation: rota 2000ms linear;
}
@keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-o-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@moz-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-webkit-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}

.middle {
  color: #0987bc;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
	width: 130px;
	height: 130px;
	left: 15px;
	top: 15px;
	border-radius: 150px;
	position: relative;
	z-index: 4;
}

.popover {
	background: white;
	width: 80px;
	height: 162px;
	position:absolute;
	top: -3px;
	left: -3px;
	opacity:0;
	z-index:2;
	animation: popover 1000ms linear;
  -moz-animation: popover 1000ms linear;
  -o-animation: popover 1000ms linear;
  -webkit-animation: popover 1000ms linear;
}

@keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-o-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-moz-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-webkit-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

41

Circle Animation Loader

By: pixeldev

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #050801;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
a{
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;
   
}
a:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
a:nth-child(1){
    filter: hue-rotate(270deg);
}
a:nth-child(2){
    filter: hue-rotate(110deg);
}
a span{
    position: absolute;
    display: block;
}
a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
a span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

41

Glowing buttons

By: pixeldev

body{
  background:#133;
}
.container{
  width:200px;
  height:200px;
  margin:10px auto;
  background:;
}
#flame-1{
  height:95px;
  width:95px;
  background:#ff7200;
  position:relative;
  top:52px;
  left:2px;
  margin:30px 70px;
  border-radius:0% 50% 70% 50%;
  transform:rotateZ(45deg) scale(1.1);
  filter: drop-shadow(0 0 10px #d43322);
  animation:scale-alternate 2s ease-in-out infinite;
}
#flame-2{
  height:75px;
  width:75px;
  background:#ef5a00;
  position:relative;
  top:162px;
  left:-20px; 
  margin:30px 70px;
  border-radius:0% 40% 60% 40%;
  transform:scaleX(0.8) rotatez(45deg);
  filter: drop-shadow(0 0 10px #d43322);
  animation: scale-up 2s ease-in-out infinite;
}

#flame-3{
  height:75px;
  width:75px;
  background:#ef5a00;
  position:relative;
  top:-60px;
  left:50px; 
  margin:30px 70px;
  border-radius:0% 40% 60% 40%;
  transform:scaleX(0.8) rotatez(45deg);
  filter: drop-shadow(0 0 10px #d43322);
  animation: scale-up-3 3s ease-in-out infinite;
}
.wood{
  width:20px;
  height:120px;
  background:#563111;
  border-radius:5px;
  }
#wood-1{
  transform:rotate(72deg);
  position:relative;
  top:-220px;
  left:117px;
}

#wood-2{
  transform:rotate(106deg);
  position:relative;
  top:-340px;
  left:115px;
}
.small-element{
  height:20px;
  width:20px;
  border-radius:50%;
  background: #ef5a00;  
  position:relative;
  top:-130px;
  left:110px;
    
}
#small-element-1{
    
  animation: particle-up 3.5s ease-in-out infinite;
  
}
#small-element-2{
    
  animation: particle-up 3s ease-in-out infinite;
  
}

.fire-bottom .main-fire {
  position: relative;
  top: -190px;
  left: 90px;
  width: 55px;
  height: 55px;
  background-color: #ff7800;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 100% 40%;
  filter: blur(8px);
  animation: glow 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;

}
@keyframes glow{
  0%,100%{
    
    background:#ef5a00;
  }
  50%{
    background:#ff7800;

}
  
}

@keyframes scale-up-3{
  0%,100%{
    transform:scale(1.1) rotatez(45deg);
       
  }
  40%,90%{
    transform:scale(0.96) rotatez(45deg);
  }
  30%,75%{
    transform:scale(0.90) rotatez(45deg);
  }
  
  
}

@keyframes scale-up{
  0%,100%{
    transform:scale(1) rotatez(45deg);
       
  }
  40%,90%{
    transform:scale(0.96) rotatez(45deg);
  }
  30%,75%{
    transform:scale(0.90) rotatez(45deg);
  }
  
  
}

@keyframes scale-alternate{
   0%,100%{
    transform:scale(1.1) rotatez(45deg);
       
  }
  30%,90%{
    transform:scale(0.90) rotatez(45deg);
  }
   45%,60%{
    transform:scale(0.96) rotatez(45deg);
  }
  50%,75%{
    transform:scale(0.97) rotatez(45deg);
  }
  
  
}
@keyframes particle-up{
  0%{
    top:-130px;
    left:110px;
  }
  100%{
    position:relative;
    opacity:0.8;
    top:-270px;
     left:145px;
    transform:scale(0.1);
    
  }
  
  
}

41

Fire Animation

By: pixeldev

41

Typewriter Effect -Single Word Animation

By: pixeldev

body { background: #222; }
.box {
  background-color: #61ab20;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  box-shadow: inset 0 0 3px #000;
  border-radius: 5px;
  border: 1px solid #111;
  overflow: hidden;
}
.box b {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3673cf;
  box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: absolute;
  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 280px; }
}

40

CSS Bouncing Ball

By: pixeldev

* {
	margin: 0; padding: 0;
	box-sizing: border-box;
}
body {
	background: #ffffff; align-items: center;
    min-height: 100vh; display: flex;
}
.box-outer {
	overflow: hidden; margin: 50px auto;
	width: 200px; height: 200px;
}
.main_box {
	width: 200px; height: 200px;
	position: relative;
	background: #f34c4c;
	border: 5px solid #ffffff;
}
.bar {
	position: absolute; width: 50px;
	height: 5px; background: rgb(0, 0, 0);
	transition: all 1s linear;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
.bar.delay {
	animation-delay: 0.5s;
}
.top {
	top: -5px; left: -5px;
}
.right {
	top: 18px; right: -28px;
	transform: rotate(90deg);
}
.bottom {
	bottom: -5px; left: -5px;
}
.left {
	top: 18px; left: -28px;
	transform: rotate(90deg);
}

@-webkit-keyframes h-move {
 0% { left: -5px; }
100% { left: 200px; }
}

@keyframes h-move {
 0% { left: -5px; }
100% { left: 200px; }
}
.top, .bottom { animation-name: h-move; }

@-webkit-keyframes v-move {
0% { top: -5px; }
100% { top:228px; }
}

@keyframes v-move {
 0% { top: -5px; }
100% { top:228px; }
}

.right, .left {
	animation-name: v-move;
}

40

Box border animation

By: pixeldev

40

scroll down line animation

By: pixeldev

body {background: #222;}

/* leaf animations */

#leaves {position:relative;top:-50px;width:100%;text-align: right;}

#leaves i {
    display: inline-block;
    width: 200px;
    height: 150px;
    background: linear-gradient(to bottom right, #309900, #005600);
    transform: skew(20deg);
    border-radius: 5% 40% 70%;
    box-shadow: inset 0px 0px 1px #222;
    border: 1px solid #333;
    z-index: 1;
    -webkit-animation: falling 5s 0s infinite;
}

#leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; }
#leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; }

#leaves i:before {
  position: absolute;
  content: '';
  top: 117px;
  right: 9px;
  height: 27px;
  width: 32px;
  transform: rotate(49deg);
  border-radius: 0% 15% 15% 0%;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  border-left: 0px solid #222;
  border-right: 1px solid #222;
  background: linear-gradient(to right, rgba(0,100,0,1), #005600);
  z-index: 1;
}

#leaves i:after {
  content: '';
  height: 125px;
  width: 10px;
  background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0));
  display: block;
  transform: rotate(125deg);
  position: absolute;
  left: 85px;
  border-radius:50%;
}

#leaves i:nth-of-type(n)    { height:23px; width:30px; }
#leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; }
#leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; }

#leaves i:nth-of-type(2n+1)    { height:11px; width:16px; }
#leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; }
#leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; }

#leaves i:nth-of-type(3n+2)  { height:17px; width:23px; }
#leaves i:nth-of-type(3n+2):before  { height:4px; width:4px; top:12px; right:1px; }
#leaves i:nth-of-type(3n+2):after  { height:10px; width:2px; top:1px; left:8px; }

#leaves i:nth-of-type(n)   { -webkit-animation-delay: 1.9s;}
#leaves i:nth-of-type(2n)  { -webkit-animation-delay: 3.9s;}
#leaves i:nth-of-type(3n)  { -webkit-animation-delay: 2.3s;}
#leaves i:nth-of-type(4n)  { -webkit-animation-delay: 4.4s;}
#leaves i:nth-of-type(5n)  { -webkit-animation-delay: 5s;  }
#leaves i:nth-of-type(6n)  { -webkit-animation-delay: 3.5s;}
#leaves i:nth-of-type(7n)  { -webkit-animation-delay: 2.8s;}
#leaves i:nth-of-type(8n)  { -webkit-animation-delay: 1.5s;}
#leaves i:nth-of-type(9n)  { -webkit-animation-delay: 3.3s;}
#leaves i:nth-of-type(10n) { -webkit-animation-delay: 2.5s;}
#leaves i:nth-of-type(11n) { -webkit-animation-delay: 1.2s;}
#leaves i:nth-of-type(12n) { -webkit-animation-delay: 4.1s;}
#leaves i:nth-of-type(13n) { -webkit-animation-delay: 1s;  }
#leaves i:nth-of-type(14n) { -webkit-animation-delay: 4.7s;}
#leaves i:nth-of-type(15n) { -webkit-animation-delay: 3s;  }

#leaves i:nth-of-type(n)    { background: linear-gradient(to bottom right, #309900, #005600); }
#leaves i:nth-of-type(2n+2)  { background: linear-gradient(to bottom right, #5e9900, #2b5600); }
#leaves i:nth-of-type(4n+1)  { background: linear-gradient(to bottom right, #990, #564500); }

#leaves i:nth-of-type(n)    { opacity: .7;}
#leaves i:nth-of-type(3n+1)  { opacity: .5;}
#leaves i:nth-of-type(3n+2)  { opacity: .3;}

#leaves i:nth-of-type(n)    {transform: rotate(180deg);}

#leaves i:nth-of-type(n) { -webkit-animation-timing-function:ease-in-out;}

@-webkit-keyframes falling {
    
    0% {
        -webkit-transform:
            translate3d(300,0,0)
            rotate(0deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-350px,700px,0)
            rotate(90deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling3 {
     0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotate(-20deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-230px,640px,0)
            rotate(-70deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling2 {
     0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotate(90deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-400px,680px,0)
            rotate(0deg);
        opacity: 0;
    }
}

40

Falling leaves

By: pixeldev

body {
  height: 100vh;
  overflow-x: hidden;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#333),
    to(#000)
  );
  background: linear-gradient(to bottom, #333, #000);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
.square {
  height: 150px;
  width: 150px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(0deg);
  transform: translateX(-50%) rotateX(35deg) rotateY(0deg);
  bottom: 100px;
  left: 50%;
  -webkit-animation: rotate 4s infinite linear;
  animation: rotate 4s infinite linear;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
    transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
    transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
  }
}
.side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.2);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.side-1,
.side-2 {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  background: rgba(0, 0, 255, 0.4);
}
.side-3,
.side-4 {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  background: rgba(0, 0, 255, 0.6);
}
.side-1 {
  left: 50%;
}
.side-2 {
  left: -50%;
}
.side-3 {
  top: 50%;
}
.side-4 {
  top: -50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.side-5 {
  -webkit-transform: translateZ(-75px);
  transform: translateZ(-75px);
}
.side-6 {
  -webkit-transform: translateZ(75px);
  transform: translateZ(75px);
}
.ball {
  position: absolute;
  height: 50px;
  width: 50px;
  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#111),
    color-stop(#555),
    to(#ccc)
  );
  background: linear-gradient(to right top, #111, #555, #ccc);
  left: 50%;
  bottom: 180px;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  border-radius: 50%;
  -webkit-animation: bounce 1.4s infinite linear;
  animation: bounce 1.4s infinite linear;
}
@-webkit-keyframes bounce {
  50% {
    -webkit-transform: translate(-50%, -300%);
    transform: translate(-50%, -300%);
  }
  100% {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
}
@keyframes bounce {
  50% {
    -webkit-transform: translate(-50%, -300%);
    transform: translate(-50%, -300%);
  }
  100% {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
}
.shadow {
  height: 80px;
  width: 80px;
  background: radial-gradient(transparent, #000);
  -webkit-box-shadow: 10px 10px 20px #000, -10px -10px 20px #000;
  box-shadow: 10px 10px 20px #000, -10px -10px 20px #000;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  border-radius: 50%;
  -webkit-animation: show 1.4s infinite linear;
  animation: show 1.4s infinite linear;
  opacity: 1;
}
@-webkit-keyframes show {
  50% {
    -webkit-box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    height: 40px;
    width: 40px;
  }
}
@keyframes show {
  50% {
    -webkit-box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    height: 40px;
    width: 40px;
  }
}

40

3d box-ball animation

By: pixeldev

.center {
    text-align:center;
}

#boxWrapper {
  width: 100%;
  height: 300px;
}

.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  display: inline-block;
  font-size: 60px;
  line-height: 80px;
  color: white;
  text-align: center;
  border:1px solid white;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translateZ(0.1px);
  -moz-transform: translateZ(0.1px);
  -o-transform: translateZ(0.1px);
  -ms-transform: translateZ(0.1px);
  transform: translateZ(0.1px);
  -webkit-animation: hue-animation 7s 0s linear infinite;
  animation: hue-animation 7s 0s linear infinite;
  
}

.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes introAnimation {
  0% {
    -webkit-transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(0.8) rotate(0deg);
  }
}

@-moz-keyframes introAnimation {
  0% {
    -moz-transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    -moz-transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    -moz-transform: scale(1) rotate(0deg);
  }
  100% {
    -moz-transform: scale(0.8) rotate(0deg);
  }
}

@-o-keyframes introAnimation {
  0% {
    -o-transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    -o-transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    -o-transform: scale(1) rotate(0deg);
  }
  100% {
    -o-transform: scale(0.8) rotate(0deg);
  }
}

@keyframes introAnimation {
  00% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(0.8) rotate(0deg);
  }
}

.introAnimation {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: introAnimation;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: introAnimation;
  -o-backface-visibility: visible !important;
  -o-animation-name: introAnimation;
  backface-visibility: visible !important;
  animation-name: introAnimation;
}

.two {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.three {
  -webkit-animation-delay: 1.0s;
  -moz-animation-delay: 1.0s;
  -ms-animation-delay: 1.0s;
  -o-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

.four {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.five {
  -webkit-animation-delay: 2.0s;
  -moz-animation-delay: 2.0s;
  -ms-animation-delay: 2.0s;
  -o-animation-delay: 2.0s;
  animation-delay: 2.0s;
}

.six {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.seven {
  -webkit-animation-delay: 3.0s;
  -moz-animation-delay: 3.0s;
  -ms-animation-delay: 3.0s;
  -o-animation-delay: 3.0s;
  animation-delay: 3.0s;
}

.eight {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  -ms-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.nine {
  -webkit-animation-delay: 4.0s;
  -moz-animation-delay: 4.0s;
  -ms-animation-delay: 4.0s;
  -o-animation-delay: 4.0s;
  animation-delay: 4.0s;
}

.ten {
  -webkit-animation-delay: 4.5s;
  -moz-animation-delay: 4.5s;
  -ms-animation-delay: 4.5s;
  -o-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.eleven {
  -webkit-animation-delay: 5.0s;
  -moz-animation-delay: 5.0s;
  -ms-animation-delay: 5.0s;
  -o-animation-delay: 5.0s;
  animation-delay: 5.0s;
}

body{
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#boxWrapper{
  width: 100%;
  height: 100vmax;
  background: #efb73e;
  opacity: .8;
  -webkit-animation: hue-animation 7s 0s linear infinite;
  animation: hue-animation 7s 0s linear infinite;
}

@keyframes hue-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

@-webkit-keyframes hue-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

40

Rainbow Background

By: pixeldev

body{
  background: #333642;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 250px;
  height:600px;
}

.cog-one {
  --cog-color: #898888;
  --cog-accent-color: #A5A2A2;
  --cog-inner-size: 30px;
  --cog-outer-size: 50px;
  
  --start-rotation: 360deg;
  --end-rotation: 0deg;
}

.cog-two {
  --cog-color: #A16036;
  --cog-accent-color: #BC7F60;
  --cog-inner-size: 15px;
  --cog-outer-size: 40px;
  
  --start-rotation: 16deg;
  --end-rotation: 376deg;
  
  left: 120px;
  top: 110px;
  
  transform: rotate(var(--start-rotation));
}

.cog-three {
  --cog-color: #F1B72E;
  --cog-accent-color: #FFD100;
  --cog-inner-size: 20px;
  --cog-outer-size: 50px;
  
  --start-rotation: 300deg;
  --end-rotation: -60deg;
  
  left: 33px;
  top: 210px;
  
  transform: rotate(var(--start-rotation));
  
}

.cog {
  position: absolute;
  width: var(--cog-inner-size);
  height: var(--cog-inner-size);
  background: transparent;
  border-radius: 50%;
  border: var(--cog-outer-size) solid var(--cog-color);
  
  animation: 5s cogRotate infinite linear;
}

@keyframes cogRotate {
  0% {
    transform: rotate(var(--start-rotation));
  }
  
  100% {
    transform: rotate(var(--end-rotation))
  }
}

/* Inner circle accent */
.cog::before {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + 10px);
  height: calc(var(--cog-inner-size) + 10px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Outer circle accent */
.cog::after {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  height: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.teeth.vertical {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Top and bottom teeth */
.cog-one .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
  top: -70px;
}

.cog-two .teeth.vertical {
  width: 15px;
  height: 125px;
  top: -55px;
  
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  
}

.cog-three .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
  top: -70px;
}

.teeth.vertical::after {
  content: '';
  position: absolute;
  transform:rotate(45deg);
}

/* Top right and bottom left teeth */
.cog-one .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
}

.cog-two .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  width: 15px;
  height: 125px;
}

.cog-three .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
}

.teeth.horizontal {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

/* Left and right teeth */
.cog-one .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
  left: -55px;
}

.cog-three .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

.teeth.horizontal::after {
  content: '';
  position: absolute;
  transform: rotate(45deg);
}

/* Top left and bottom right teeth */
.cog-one .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
}

.cog-three .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

40

All

CSS Grid Layout – with color

By: pixeldev

Circle Animation Loader

By: pixeldev

Glowing buttons

By: pixeldev

Fire Animation

By: pixeldev

Typewriter Effect -Single Word Animation

By: pixeldev

CSS Bouncing Ball

By: pixeldev

Box border animation

By: pixeldev

scroll down line animation

By: pixeldev

Falling leaves

By: pixeldev

3d box-ball animation

By: pixeldev

Rainbow Background

By: pixeldev

Cogs Animation

By: pixeldev