CSS Code Only

.loadingspinner {
  --square: 26px;
  --offset: 30px;
  --duration: 2.4s;
  --delay: 0.2s;
  --timing-function: ease-in-out;
  --in-duration: 0.4s;
  --in-delay: 0.1s;
  --in-timing-function: ease-out;
  width: calc( 3 * var(--offset) + var(--square));
  height: calc( 2 * var(--offset) + var(--square));
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 30px;
  position: relative;
}

.loadingspinner div {
  display: inline-block;
  background: darkorange;
    /*background: var(--text-color);*/
    /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
  border: none;
  border-radius: 2px;
  width: var(--square);
  height: var(--square);
  position: absolute;
  padding: 0px;
  margin: 0px;
  font-size: 6pt;
  color: black;
}

.loadingspinner #square1 {
  left: calc( 0 * var(--offset) );
  top: calc( 0 * var(--offset) );
  animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square2 {
  left: calc( 0 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
              squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square3 {
  left: calc( 1 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square4 {
  left: calc( 2 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}

.loadingspinner #square5 {
  left: calc( 3 * var(--offset) );
  top: calc( 1 * var(--offset) );
  animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
               squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}

@keyframes square1 {
  0% {
    left: calc( 0 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

8.333% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

100% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square2 {
  0% {
    left: calc( 0 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

8.333% {
    left: calc( 0 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

16.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

25.00% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

83.33% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

91.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

100% {
    left: calc( 0 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }
}

@keyframes square3 {
  0%,100% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

16.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

25.00% {
    left: calc( 1 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

33.33% {
    left: calc( 2 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

41.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

66.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

75.00% {
    left: calc( 2 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

83.33% {
    left: calc( 1 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

91.67% {
    left: calc( 1 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square4 {
  0% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

33.33% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

41.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

50.00% {
    left: calc( 3 * var(--offset) );
    top: calc( 2 * var(--offset) );
  }

58.33% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

100% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes square5 {
  0% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

50.00% {
    left: calc( 3 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

58.33% {
    left: calc( 3 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

66.67% {
    left: calc( 2 * var(--offset) );
    top: calc( 0 * var(--offset) );
  }

75.00% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }

100% {
    left: calc( 2 * var(--offset) );
    top: calc( 1 * var(--offset) );
  }
}

@keyframes squarefadein {
  0% {
    transform: scale(0.75);
    opacity: 0.0;
  }

100% {
    transform: scale(1.0);
    opacity: 1.0;
  }
}

46

Tetris Block Loader

By: pixeldev

* {
   font-family: 'Roboto',sans-serif;
}

h1, p {
   text-align: center;
   font-weight: 300;
}

h1 {
   font-size: 2em;
}

.word-spinner {
   font-size: 2em;
   height: 2em;
   line-height: 2em;
   overflow: hidden;
}

.word-spinner > span {
   display: block;
}

.word-spinner > span {
   position: relative;
   display: block;
   text-align: center;
   top: -100%;
   
   animation: wordspin 5s infinite;
   -webkit-animation: wordspin 5s infinite;
}     
     
/* spinning animation */
@keyframes wordspin
{
   0% { top: 0%; }
   33% { top: -100%; }
   66% { top: -200%; }
   100% { top: -300%; }
}

@-webkit-keyframes wordspin /*Safari and Chrome*/
{
   0% { top: 0%; }
   33% { top: -100%; }
   66% { top: -200%; }
   100% { top: -300%; }
}

/* loader div */
#loader2 {
   width: 16em;
   height: 16em;
   margin: 6em auto 6em auto;
   font-size: 12px;
   
   background-color: white;
   
   border-left: 1.6em solid #3399FF;
   border-right: 1.6em solid #3399FF;
   border-top: 1.6em solid transparent;
   border-bottom: 1.6em solid transparent;
   
   border-radius: 100%;  
   -webkit-border-radius: 100%;  
   
   animation: loader 1s infinite;
   -webkit-animation: loader 1s infinite;
}     
     
/* spinning animation */
@keyframes loader
{
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

@-webkit-keyframes loader /*Safari and Chrome*/
{
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }
}
 
.ownlink {
   color: #3399FF;
   text-decoration: none;
   font-style: italic;
}

45

Loading Animation v2

By: pixeldev

45

Text sliding animation

By: pixeldev

:root {
  --sqrt3: 1.73205080757;                      /* Square root of 3 */
  --time: 11;                                  /* Duration of animation  */
  --gap: 1;                                    /* Horizontal gap between hexagons */
  --radius: 3;                                 /* Radius of inscribed circle */
  --Gap: var(--gap) / 2 * var(--sqrt3);        /* Vertical gap between hexagons */
  --Radius: 2 / var(--sqrt3) * var(--radius);  /* Radius of circumcircle */
}

@keyframes odd-animation {
  0%   { transform: translate(calc( 0.5 * var(--offset-x) ), calc( 0.5 * var(--offset-y) )) scale(0) }
  33%  { transform: translate(calc(   1 * var(--offset-x) ), calc(   1 * var(--offset-y) )) scale(1) }
  66%  { transform: translate(calc(   2 * var(--offset-x) ), calc(   2 * var(--offset-y) )) scale(1) }
  100% { transform: translate(calc(   3 * var(--offset-x) ), calc(   3 * var(--offset-y) )) scale(0) }
}

@keyframes even-animation {
  50%  { transform: translate(calc( 1 * var(--offset-x) ), calc( 1 * var(--offset-y) )) scale(1) }
  100% { transform: translate(calc( 2 * var(--offset-x) ), calc( 2 * var(--offset-y) )) scale(0) }
}

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}

.hex {
  color: white;
  display: flex;
  font-size: 3vmin;
  height: calc(2em * var(--Radius));
  width: calc(2em * var(--radius));
}

.hex::before {
  border: calc(0.5em * var(--Radius)) solid transparent;
  border-left: 0;
  border-right: calc(1em * var(--radius)) solid currentColor;
  content: "";
  height: var(--Radius);
}

.hex::after  {
  border: calc(0.5em * var(--Radius)) solid transparent;
  border-left: calc(1em * var(--radius)) solid currentColor;
  border-right: 0;
  content: "";
  height: var(--Radius);
}

.center {
  position: relative;
}

.odd,
.even {
  --global-offset-x: calc( 0.5em * var(--gap) + var(--radius) * 1em);
  --global-offset-y: calc( 1.5em * var(--Radius) + var(--Gap) * 1em);
  animation: infinite cubic-bezier(.21, .61, .01, .89);
  position: absolute;
  transform: translate(0, 0) scale(0);  
}

.odd {
  animation-duration: 11s;
}
.even {
  animation-duration: 7.333333333s;
}

.hex.first {
  animation-delay: -6.2857142857s;
}
.hex.second {
  animation-delay: -2.619047619s;
}
.hex.third {
  animation-delay: 1.0476190476s;
}

@supports (animation-delay: calc(1 * 1s)) and (animation-duration: calc(1 * 1s)) {
  .odd {
    animation-duration: calc(var(--time) * 1s);
  }
  .even {
    animation-duration: calc( var(--time) * 2 / 3 * 1s);
  }
  
  .hex.first {
    animation-delay: calc( var(--time) / -1.75 * 1s );
  }
  .hex.second {
    animation-delay: calc( var(--time) * 1.25 / -5.25 * 1s );
  }
  .hex.third {
    animation-delay: calc( var(--time) * -0.25 / -2.625 * 1s );
  }
}

.hex.one {
  --offset-x: calc( var(--global-offset-x) * 1 );
  --offset-y: calc( var(--global-offset-y) * -1 );
  animation-name: odd-animation;
  bottom: 0;
  left: 0;
}
.hex.two {
  --offset-x: calc( var(--global-offset-x) * 1.5 );
  --offset-y: calc( var(--global-offset-y) * -0.5 );
  animation-name: even-animation;
  bottom: calc( var(--global-offset-y) * 0.5 );
  left: calc( var(--global-offset-x) * 1.5 );
}
.hex.three {
  --offset-x: calc( var(--global-offset-x) * 2 );
  --offset-y: calc( var(--global-offset-y) * 0 );
  animation-name: odd-animation;
  bottom: 0;
  right: 0;
}
.hex.four {
  --offset-x: calc( var(--global-offset-x) * 1.5 );
  --offset-y: calc( var(--global-offset-y) * 0.5 );
  animation-name: even-animation;
  top: calc( var(--global-offset-y) * 0.5 );
  left: calc( var(--global-offset-x) * 1.5 );
}
.hex.five {
  --offset-x: calc( var(--global-offset-x) * 1 );
  --offset-y: calc( var(--global-offset-y) * 1 );
  animation-name: odd-animation;
  top: 0;
  left: 0;
}
.hex.six {
  --offset-x: calc( var(--global-offset-x) * 0 );
  --offset-y: calc( var(--global-offset-y) * 1 );
  animation-name: even-animation;
  top: calc( var(--global-offset-y) * 1 );
  left: 0;
}
.hex.seven {
  --offset-x: calc( var(--global-offset-x) * -1 );
  --offset-y: calc( var(--global-offset-y) * 1 );
  animation-name: odd-animation;
  top: 0;
  right: 0;
}
.hex.eight {
  --offset-x: calc( var(--global-offset-x) * -1.5 );
  --offset-y: calc( var(--global-offset-y) * 0.5 );
  animation-name: even-animation;
  top: calc( var(--global-offset-y) * 0.5 );
  right: calc( var(--global-offset-x) * 1.5 );
}
.hex.nine {
  --offset-x: calc( var(--global-offset-x) * -2 );
  --offset-y: calc( var(--global-offset-y) * 0 );
  animation-name: odd-animation;
  top: 0;
  right: 0;
}
.hex.ten {
  --offset-x: calc( var(--global-offset-x) * -1.5 );
  --offset-y: calc( var(--global-offset-y) * -0.5 );
  animation-name: even-animation;
  bottom: calc( var(--global-offset-y) * 0.5 );
  right: calc( var(--global-offset-x) * 1.5 );
}
.hex.eleven {
  --offset-x: calc( var(--global-offset-x) * -1 );
  --offset-y: calc( var(--global-offset-y) * -1 );
  animation-name: odd-animation;
  bottom: 0;
  right: 0;
}
.hex.twelve {
  --offset-x: calc( var(--global-offset-x) * 0 );
  --offset-y: calc( var(--global-offset-y) * -1 );
  animation-name: even-animation;
  bottom: calc( var(--global-offset-y) * 1 );
  left: 0;
}

45

Hexagon Animation

By: pixeldev

.loadingWrap {  
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 500px;
  height: 50px;
  text-align: center;
}

.loadingBoxes {
  display: inline-block;
  margin: 3px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.loadingBoxColour1 {background: #00A396; 
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.0s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  
     }
    .loadingBoxColour2 {background: #81C540;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.1s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  
    }
    .loadingBoxColour3 {background: #F5B52E;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.2s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  
    }
    .loadingBoxColour4 {background: #ED5B35;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.3s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  }

.loadingBoxColour5 {background: #EA225E;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.4s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  }

@keyframes loadingBoxColour {
            0% { transform: scale(1.0); }
            50% { transform: scale(0.5); }
            100% { transform: scale(1.0); }
          }

44

Loading Animation

By: pixeldev

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#ms-container {
	width: 100%;
	height: 100vh;
	background: #1c9cf2;
}

.ms-content {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 10px solid #2ea4f2;
	border-radius: 100%;
}

.ms-content-inside {
	width: 100%;
	height: 100%;
	position: relative;
}

.ms-line-down-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: rotate(0deg);
	transition: transform 0s ease;
}
#ms-download {
	display: none;
}
#ms-download:checked ~ .ms-line-down-container {
	transform: rotate(-360deg);
	transition: transform 1.5s ease 1.25s;
}

.ms-line-down {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 10px;
	height: 125px;
	background: #FFFFFF;
	border-radius: 50px;
	transition: height .5s ease;
}

#ms-download:checked ~ .ms-line-down-container .ms-line-down {
	height: 10px;
	top: -20px;
	animation: ms-bounce .5s forwards .55s;
}
#ms-download:checked ~ .ms-line-down-container .ms-line-down:before {
	content: '';
	position: absolute;
	top: 0;
	left: -94px;
	right: 0;
	bottom: 0;
	width: 200px;
	height: 200px;
	border: 10px solid transparent;
	border-radius: 100%;
	animation: ms-border-fill .5s forwards 3s;
}

.ms-line-point {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 58px;
	height: 130px;
	transition: height .15s ease .45s;
}

#ms-download:checked ~ .ms-line-point {
	height: 60px;
}

#ms-download:checked ~ .ms-line-point:before {
	transform: rotate(90deg);
	right: -10px;
	animation: ms-check-right .25s forwards 3s;
}

#ms-download:checked ~ .ms-line-point:after {
	transform: rotate(-90deg);
	left: -10px;
	animation: ms-check-left .25s forwards 3s;
}

.ms-line-point:before,
.ms-line-point:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 75px;
	bottom: -10px;
	background: #FFFFFF;
	border-radius: 50px;
	transition: transform .15s ease .47s, left .15s ease .47s, right .15s ease .47s;
}

.ms-line-point:before {
	right: 0px;
	transform: rotate(45deg);
}

.ms-line-point:after {
	left: 0px;
	transform: rotate(-45deg);
}

@keyframes ms-bounce {
	0% {
		top: -20px;
	}
	25% {
		top: -250px;
	}
	50% {
		top: -275px;
	}
	100% {
		top: -190px;
	}
}

@keyframes ms-check-left {
	0% {
		transform: rotate(-90deg);
		left: -10px;
		height: 75px;
	}
	100% {
		transform: rotate(-45deg);
		left: 0px;
		height: 45px;
	}
}

@keyframes ms-check-right {
	0% {
		transform: rotate(90deg);
		right: -10px;
		height: 75px;
		bottom: -10px;
	}
	100% {
		transform: rotate(45deg);
		right: 10px;
		height: 80px;
		bottom: -15px;
	}
}

@keyframes ms-border-fill {
	0% {
		border: 10px solid transparent;
	}
	100% {
		border: 10px solid #FFFFFF;
	}
}

44

Download Animation

By: pixeldev

44

Red loading animation

By: pixeldev

*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
  background:  #004050;
  font-family: Quando;
  font-weight: 300;
  width: 100%;
}
h2, h3 {
  background: #0D757D;
  width: 100%;
  min-height: 200px;
  line-height: 200px;
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  color: rgba(0,0,0,.4);
  margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}

h2 > a, h3 > a {
  text-decoration: none;
  color: rgba(0,0,0,.4);
  z-index: 1;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}
.uno a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #ffdb00;  
}
.dos > a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  border: 1px solid #000;
  bottom: -2px;
  left: 0;
  background: #fff;
  border-radius: 5px;
  opacity: 0;
  transform: scalex(0);
  transition: .5s;
}
.dos.bis > a:after {
  opacity: .05;
  transform: scalex(1);
}
.dos:hover > a:after {
  opacity: .15;
  transform: scalex(1);
}
.dos.bis > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FF5E33;
}

h3 > a:before {
  content: "";
  background: #7FDBFF;
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  transform: scaleX(0);
  animation: 1.4s forwards no-hover-v linear;
  animation-fill-mode: forwards;
  z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
  animation: .5s forwards hover-v linear;
  animation-fill-mode: forwards;
}
@keyframes hover-v {
  0% {
      transform: scaleX(0);
      height: 5px;
     }
  45% {   
      transform: scaleX(1.05);
      height: 5px;
     }
  55% {height: 5px;}
  100% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
}
@keyframes no-hover-v {
  0% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
  45% {height: 5px;}
  55% {   
      transform: scaleX(1.05);
      height: 5px;
      opacity: 1;
     }
  
  100% {
      transform: scaleX(0);
      height: 5px;
      opacity: .02;
     }
}

p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}

44

text-decoration: underline animated

By: pixeldev

body{
				background: #373940;
			}
			
			.socket{
				width: 200px;
				height: 200px;
				position: absolute;
				left: 50%;
				margin-left: -100px;
				top: 50%;
				margin-top: -100px;
			}
			
			.hex-brick{
			  background: #ABF8FF;
			  width: 30px;
			  height: 17px;
			  position: absolute;
			  top: 5px;
        animation-name: fade;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				-webkit-animation-name: fade;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
			}
			
			.h2{
				transform: rotate(60deg);
				-webkit-transform: rotate(60deg);
			}
			
			.h3{
				transform: rotate(-60deg);
				-webkit-transform: rotate(-60deg);
			}
			
			.gel{
				height: 30px;
				width: 30px;	
				transition: all .3s;
				-webkit-transition: all .3s;
				position: absolute;
        top: 50%;
        left: 50%;
			}
			
			.center-gel{
				margin-left: -15px;
				margin-top: -15px;
				
				animation-name: pulse;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				-webkit-animation-name: pulse;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
			}
			
			.c1{
				margin-left: -47px;
				margin-top: -15px;
			}
			
			.c2{
				margin-left: -31px;
				margin-top: -43px;
			}
			
			.c3{
				margin-left: 1px;
				margin-top: -43px;
			}
			
			.c4{
				margin-left: 17px;
				margin-top: -15px;
			}
			.c5{
				margin-left: -31px;
				margin-top: 13px;
			}
			
			.c6{
				margin-left: 1px;
				margin-top: 13px;
			}
			
			.c7{
				margin-left: -63px;
				margin-top: -43px;
			}
			
			.c8{
				margin-left: 33px;
				margin-top: -43px;
			}
			
			.c9{
				margin-left: -15px;
				margin-top: 41px;
			}
			
			.c10{
				margin-left: -63px;
				margin-top: 13px;
			}
			
			.c11{
				margin-left: 33px;
				margin-top: 13px;
			}
			
			.c12{
				margin-left: -15px;
				margin-top: -71px;
			}
			
			.c13{
				margin-left: -47px;
				margin-top: -71px;
			}
			
			.c14{
				margin-left: 17px;
				margin-top: -71px;
			}
			
			.c15{
				margin-left: -47px;
				margin-top: 41px;
			}
			
			.c16{
				margin-left: 17px;
				margin-top: 41px;
			}
			
			.c17{
				margin-left: -79px;
				margin-top: -15px;
			}
			
			.c18{
				margin-left: 49px;
				margin-top: -15px;
			}
			
			.c19{
				margin-left: -63px;
				margin-top: -99px;
			}
			
			.c20{
				margin-left: 33px;
				margin-top: -99px;
			}
			
			.c21{
				margin-left: 1px;
				margin-top: -99px;
			}
			
			.c22{
				margin-left: -31px;
				margin-top: -99px;
			}
			
			.c23{
				margin-left: -63px;
				margin-top: 69px;
			}
			
			.c24{
				margin-left: 33px;
				margin-top: 69px;
			}
			
			.c25{
				margin-left: 1px;
				margin-top: 69px;
			}
			
			.c26{
				margin-left: -31px;
				margin-top: 69px;
			}
			
			.c27{
				margin-left: -79px;
				margin-top: -15px;
			}
			
			.c28{
				margin-left: -95px;
				margin-top: -43px;
			}
			
			.c29{
				margin-left: -95px;
				margin-top: 13px;
			}
			
			.c30{
				margin-left: 49px;
				margin-top: 41px;
			}
			
			.c31{
				margin-left: -79px;
				margin-top: -71px;
			}
			
			.c32{
				margin-left: -111px;
				margin-top: -15px;
			}
			
			.c33{
				margin-left: 65px;
				margin-top: -43px;
			}
			
			.c34{
				margin-left: 65px;
				margin-top: 13px;
			}
			
			.c35{
				margin-left: -79px;
				margin-top: 41px;
			}
			
			.c36{
				margin-left: 49px;
				margin-top: -71px;
			}
			
			.c37{
				margin-left: 81px;
				margin-top: -15px;
			}
			
			.r1{
				animation-name: pulse;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-delay: .2s;
				-webkit-animation-name: pulse;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-delay: .2s;
			}
			
			.r2{
				animation-name: pulse;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-delay: .4s;
				-webkit-animation-name: pulse;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-delay: .4s;
			}
			
			.r3{
				animation-name: pulse;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-delay: .6s;
				-webkit-animation-name: pulse;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-delay: .6s;
			}
			
			.r1 > .hex-brick{
				animation-name: fade;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-delay: .2s;
				-webkit-animation-name: fade;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-delay: .2s;
			}
			
			.r2 > .hex-brick{
				animation-name: fade;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-delay: .4s;
				-webkit-animation-name: fade;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-delay: .4s;
			}
			
			.r3 > .hex-brick{
				animation-name: fade;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-delay: .6s;
				-webkit-animation-name: fade;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-delay: .6s;
			}
			
			
			@keyframes pulse{
				0%{
					-webkit-transform: scale(1);
					transform: scale(1);
				}
				
				50%{
					-webkit-transform: scale(0.01);
					transform: scale(0.01);
				}
				
				100%{
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}
			
			@keyframes fade{
				0%{
					background: #ABF8FF;
				}
				
				50%{
					background: #90BBBF;
				}
				
				100%{
					background: #ABF8FF;
				}
			}
			
			@-webkit-keyframes pulse{
				0%{
					-webkit-transform: scale(1);
					transform: scale(1);
				}
				
				50%{
					-webkit-transform: scale(0.01);
					transform: scale(0.01);
				}
				
				100%{
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}
			
			@-webkit-keyframes fade{
				0%{
					background: #ABF8FF;
				}
				
				50%{
					background: #389CA6;
				}
				
				100%{
					background: #ABF8FF;
				}
			}

43

Hexagonal Loading Animation

By: pixeldev

43

Bouncing text

By: pixeldev

body
{
  font-family: arial;
  background: -webkit-radial-gradient(circle, #757462, #272623);
  
  background: -moz-radial-gradient(circle, #757462, #272623);
}

h1
{
  -webkit-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
    -moz-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
  position: relative;
  float: left;
  color: white;
}

.object-1
{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 50%;
  background: #ffcc00;

-webkit-animation: bounce .3s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
  -moz-animation:  bounce .3s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
}

.object-2
{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 25%;
  background: #00ccff;

-webkit-animation: bounce .7s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
  -moz-animation:  bounce .7s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
}

.object-3
{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 10%;
  left: 75%;
  background: #00cc00;

-webkit-animation: bounce .2s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
  -moz-animation:  bounce .2s cubic-bezier(.63,.09,.75,.46)  infinite alternate;
}

@-webkit-keyframes bounce {
  0%, 10% { top: 10px; height: 100px; width: 100px; }
  15% { height: 103px; width: 97px; }
  35% { height: 105px; width: 95px; }
  75% { height: 107px; width: 95px; }
  85% { height: 107px; width: 95px; }
  100% { top: 200px; height: 80px; width: 105px; }
}

@-moz-keyframes bounce {
  0%, 10% { top: 10px; height: 100px; width: 100px; }
  15% { height: 103px; width: 97px; }
  35% { height: 105px; width: 95px; }
  75% { height: 107px; width: 95px; }
  85% { height: 107px; width: 95px; }
  100% { top: 200px; height: 80px; width: 105px; }
}

@-webkit-keyframes bounceSide {
  0% { left: 10px; }
  100% { left: 200px; }
}

@-moz-keyframes bounceSide {
  0% { left: 10px; }
  100% { left: 200px; }
}

43

Bouncing

By: pixeldev

.wrapper {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: scale(1.5, 1.5) translate(-50%, -50%);
}

.floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  height: 5px;
  background: #673C63;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 5px #111;
  z-index: 2;
}

.candles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 150px;
  transform: translate(-50%, -100%);
  z-index: 1;
}

.candle1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 100px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform-origin: center right;
  transform: translate(60%, -25%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: expand-body 3s infinite linear;
}

.candle1__stick, .candle2__stick {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 3px;
  height: 15px;
  background: #673C63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

.candle2__stick {
  height: 12px;
  transform-origin: bottom center;
  animation: stick-animation 3s infinite linear;
}

.candle1__eyes, .candle2__eyes {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 35px;
  height: 30px;
  transform: translate(-50%, 0%);
}

.candle1__eyes-one {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}

.candle1__eyes-two {
  position: absolute;
  left: 70%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}

.candle1__mouth {
  position: absolute;
  left: 40%;
  top: 20%;
  width: 0px;
  height: 0px;
  border-radius: 20px;
  background: #673C63;
  transform: translate(-50%, -50%);
  animation: uff 3s infinite linear;
}

.candle__smoke-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 30px;
  height: 3px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: move-left 3s infinite linear;
}

.candle__smoke-two {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: move-top 3s infinite linear;
}

.candle2 {
  position: absolute;
  left: 20%;
  top: 65%;
  width: 42px;
  height: 60px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform: translate(60%, -15%);
  transform-origin: center right;
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: shake-left 3s infinite linear;
}

.candle2__eyes-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-lower 3s infinite linear;
}

.candle2__eyes-two {
  position: absolute;
  left: 70%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-greater 3s infinite linear;
}

.light__wave {
  position: absolute;
  top: 35%;
  left: 35%;
  width: 75px;
  height: 75px;
  border-radius: 100%;
  z-index: 0;
  transform: translate(-25%, -50%) scale(2.5, 2.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: expand-light 3s infinite linear;
}

.candle2__fire {
  position: absolute;
  top: 50%;
  left: 40%;
  display: block;
  width: 16px;
  height: 20px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #FF9800;
  transform: translate(-50%, -50%);
  animation: dance-fire 3s infinite linear;
}

@keyframes blink-eyes {
  0%,35% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  36%,39% {
    opacity: 0;
    transform: translate(-70%, 0%);
  }
  40% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  50%,65% {
    transform: translate(-140%, 0%);
  }
  66% {
    transform: translate(-70%, 0%);
  }
}
@keyframes expand-body {
  0%,40% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  45%,55% {
    transform: scale(1.1, 1.1) translate(60%, -28%);
  }
  60% {
    transform: scale(0.89, 0.89) translate(60%, -25%);
  }
  65% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  70% {
    transform: scale(0.95, 0.95) translate(60%, -25%);
  }
  75% {
    transform: scale(1, 1) translate(60%, -25%);
  }
}
@keyframes uff {
  0%,40% {
    width: 0px;
    height: 0px;
  }
  50%,54% {
    width: 15px;
    height: 15px;
    left: 30%;
  }
  59% {
    width: 5px;
    height: 5px;
    left: 20%;
  }
  62% {
    width: 2px;
    height: 2px;
    left: 20%;
  }
  67% {
    width: 0px;
    height: 0px;
    left: 30%;
  }
}
@keyframes change-background {
  0%,59%,98%,100% {
    background: #FFF;
  }
  61%,97% {
    background: #000;
  }
}
@keyframes move-left {
  0%,59%,100% {
    width: 0px;
    left: 40%;
  }
  60% {
    width: 30px;
    left: 30%;
  }
  68% {
    width: 0px;
    left: 20%;
  }
}
@keyframes move-top {
  0%,64%,100% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
  65% {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 40%;
  }
  80% {
    width: 0px;
    height: 0px;
    top: 20%;
  }
}
@keyframes shake-left {
  0%,40% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  50%,54% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  59% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  62% {
    left: 18%;
    transform: translate(60%, -15%);
  }
  65% {
    left: 21%;
    transform: translate(60%, -15%);
  }
  67% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  75% {
    left: 20%;
    transform: scale(1.15, 0.85) translate(60%, -15%);
    background: #fff;
    border-color: #673C63;
  }
  91% {
    left: 20%;
    transform: scale(1.18, 0.82) translate(60%, -10%);
    background: #F44336;
    border-color: #F44336;
    box-shadow: -2px 0px 0px #F44336 inset;
  }
  92% {
    left: 20%;
    transform: scale(0.85, 1.15) translate(60%, -15%);
  }
  95% {
    left: 20%;
    transform: scale(1.05, 0.95) translate(60%, -15%);
  }
  97% {
    left: 20%;
    transform: scale(1, 1) translate(60%, -15%);
  }
}
@keyframes stick-animation {
  0%,40% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  50%,54% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  59% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  62% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-15deg) translate(-50%, -100%);
  }
  65% {
    left: 50%;
    top: 0%;
    transform: rotateZ(15deg) translate(-50%, -100%);
  }
  70% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-5deg) translate(-50%, -100%);
  }
  72% {
    left: 50%;
    top: 0%;
    transform: rotateZ(5deg) translate(-50%, -100%);
  }
  74%,84% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, -100%);
  }
  85% {
    transform: rotateZ(180deg) translate(0%, 120%);
  }
  92% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
}
@keyframes expand-light {
  10%,29%,59%,89% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid rgba(255, 255, 255, 0);
  }
  90%,20%,50% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  95%,96%,26%,27%,56%,57% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  0%,28%,58%,100% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
}
@keyframes dance-fire {
  59%,89% {
    left: 40%;
    width: 0px;
    height: 0px;
  }
  90%,0%,7%,15%,23%,31%,39%,47%,55% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background: #FFC107;
  }
  94%,3%,11%,19%,27%,35%,43%,51%,58% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background: #FF9800;
  }
}
@keyframes changeto-lower {
  0%,70%,90% {
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  71%,89% {
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(-45deg) translate(-50%, -65%);
    -webkit-transform: rotate(-45deg) translate(-50%, -65%);
  }
}
@keyframes changeto-greater {
  0%,70%,90% {
    top: 50%;
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  71%,89% {
    top: 30%;
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(135deg) translate(-80%, 20%);
    -webkit-transform: rotate(135deg) translate(-80%, 20%);
  }
}

43

All

Tetris Block Loader

By: pixeldev

Loading Animation v2

By: pixeldev

Text sliding animation

By: pixeldev

Hexagon Animation

By: pixeldev

Loading Animation

By: pixeldev

Download Animation

By: pixeldev

Red loading animation

By: pixeldev

text-decoration: underline animated

By: pixeldev

Hexagonal Loading Animation

By: pixeldev

Bouncing text

By: pixeldev

Bouncing

By: pixeldev

Candle

By: pixeldev