Css Code Only Pixeldev Code

108

Wavy text animation

By: rald_dev

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

101

Loading Animation v2

By: rald_dev

body {
  background: #0a3f63;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  height: 250px;
  width: 250px;
  position: relative;
}
.circle {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  animation: rotate 3s linear infinite;
}
.circle::before {
  content: "";
  position: absolute;
  height: 10px;
  width: 50px;
  background-color: #fff;
  border-radius: 5px;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.ball {
  position: absolute;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: #fe95ff;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: move 1.5s ease-in alternate infinite;
}

@keyframes rotate {
  from {
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes move {
  from {
    box-shadow: 0 10px 0 -1px #fe95ffaa, 0 20px 0 -2px #fe95ffaa;
  }
  to {
    top: 220px;
    box-shadow: 0 -10px 0 -1px #fe95ffaa, 0 -20px 0 -2px #fe95ff55;
  }
}

99

Bouncing ball v2

By: rald_dev

body{
  background: #111;
  display: flex;
  height: 100vh;
  place-content: center;
  align-items: center;
}
.wrapper {
  background: #fff;
  position: relative;
}

.wrapper #motion-demo {
  offset-path: path("M 0 0 m 0 -37.5 a 37.5 37.5 90 1 0 0 75 a 37.5 37.5 90 1 0 0 -75");
  animation: move infinite cubic-bezier(.71,.54,.26,.8);
  width: 6px;
  height: 6px;
  border-radius: 10px;
  position: absolute;
}
#motion-demo:nth-of-type(1) {
  background: #bada55;
  animation-duration: 1.2s;
  animation-delay: .1s;
}
#motion-demo:nth-of-type(2) {
  background: dodgerblue; 
  animation-duration: 1.2s;
  animation-delay: .2s;
}

#motion-demo:nth-of-type(3) {
  background: springgreen;
  animation-duration: 1.1s;
  animation-delay: .3s;  
}
#motion-demo:nth-of-type(4) {
  background: orangered;
  animation-duration: 1s;
  animation-delay: .4s;  
}
#motion-demo:nth-of-type(5) {
  background: orange;
  animation-duration: 1s;
  animation-delay: .45s;  
}
#motion-demo:nth-of-type(6) {
  background: violet;
  animation-duration: 1s;
  animation-delay: .5s;  
}
#motion-demo:nth-of-type(7) {
  background: orangered;
  animation-duration: 1s;
  animation-delay: .55s;  
}
#motion-demo:nth-of-type(8) {
  background: orange;
  animation-duration: 1s;
  animation-delay: .6s;  
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  50%{
   opacity: 0.5;    
  }
  100% {
    offset-distance: 100%;
  }
}

96

Rainbow Loader Animation

By: rald_dev

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

96

Tetris Block Loader

By: pixeldev

96

Hamburger Menu

By: rald_dev

/* Modifier */
.c-tbl--purple th {
	background-color: hsl(330, 50%, 40%)
}
.c-tbl--purple td {
  border-color: hsl(330, 40%, 80%);
}
.c-tbl--purple tr th:last-of-type {
  border-inline-color: hsl(330, 50%, 40%);
}
.c-tbl--purple tr th:first-of-type {
  border-inline-start-color: hsl(330, 50%, 40%);
}
@media (hover: hover) {
  .c-tbl--purple tr:hover td {
		background-color: hsl(330, 60%, 95%);
  }
}

/**
 * c-tbl.css
 * @version 1.0.0
 * @description Generic Table Component
*/
:where(.c-tbl) {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 99.9%;
}

:where(.c-tbl thead th) {
  background-color: hsl(200, 60%, 40%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 0;
  border-inline-start-width: 0;
  color: hsl(200, 60%, 99%);
  padding-block: 1.25ch;
  padding-inline: 2ch;
  text-transform: uppercase;
}

:where(.c-tbl td) {
  background-color: #FFF;
  border-color: hsl(200, 60%, 80%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 1px;
  border-inline-start-width: 0;
  padding-block: 1.25ch;
  padding-inline:	2ch;
}

/* Because of `border-collapse: separate`, we need to  */
:where(.c-tbl tr td:first-of-type) {
  border-inline-start-width: 1px;
}
/* For header-cells, we set the `border-color` of the first and last border to it's `background-color` */
:where(.c-tbl tr th:last-of-type) {
  border-inline-color: hsl(200, 60%, 40%);
}
:where(.c-tbl tr th:first-of-type) {
  border-inline-start-color: hsl(200, 60%, 40%);
}
/* Set `border-radius` on first and last rows, on first and last cell */
:where(.c-tbl thead th:first-of-type) {
  border-start-start-radius: 0.5rem;
}
:where(.c-tbl thead th:last-of-type) {
  border-start-end-radius: 0.5rem;
}
:where(.c-tbl tbody tr:last-of-type td:first-of-type) {
  border-end-start-radius: 0.5rem;
}
:where(.c-tbl tr:last-of-type td:last-of-type) {
  border-end-end-radius: 0.5rem;
}

/*
=====
HOVER
=====
*/
@media (hover: hover) {
  :where(.c-tbl) tr:hover td {
		background-color: hsl(200, 60%, 95%);
  }
}

/* For demo */
body {
  font-family: ui-sans-serif, sans-serif;
  margin-block: 2ch;
  margin-inline: auto;
  max-inline-size: 64rem;
  padding-inline: 2ch;
}

button {
  padding: 1ch 2ch;
}

94

Basic Table with rounded corners

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

94

Hexagonal Loading Animation

By: rald_dev

93

Text reveal animation

By: rald_dev

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

93

Single Element Absolute Center Overlay Spinner

By: rald_dev

:root {
  --main-bg: #c9e8f7;
  --stroke-width: 6px;
  --stroke-color: #28354e;
  --cup-color: #ffffff;
  --cup-color-shadow: #dfded1;
  --cup-red: #c94f50;
  --cup-red-light: #fe6b68;
  --tebag-color: #f2f2f2;
  --teebag-content: #4cb5ae;
  --teabag-pores: #61616145;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  min-height: 100vh;
  font-family: sans-serif;
  color: #ffffff;
  background-color: var(--main-bg);
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-height: 500px;
}

.eyes {
  display: flex;
  justify-content: space-between;
}

.eye {
  position: relative;
  border-radius: 150px 150px 0 0;
  border: var(--stroke-width) solid var(--stroke-color);
  border-bottom: none;
}

.eye::before,
.eye::after {
  content: "";
  position: absolute;
  bottom: calc(var(--stroke-width) / 2 * -1);
  display: block;
  width: var(--stroke-width);
  height: var(--stroke-width);
  border-radius: 50%;
  background-color: var(--stroke-color);
}

.eye:before {
  left: calc(var(--stroke-width) * -1);
}

.eye:after {
  right: calc(var(--stroke-width) * -1);
}

.teabag {
  position: relative;
  width: 130px;
  animation: teabag 6s ease-in infinite, brew 6s linear infinite;
  z-index: 1;
}

.teabag::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 15px);
  left: 50%;
  transform: translatex(-50%);
  display: block;
  width: 6px;
  height: 450px;
  background-color: var(--stroke-color);
  z-index: 2;
}

.teabag__top {
  position: relative;
  width: 100%;
  height: 0;
  border-bottom: 40px solid var(--tebag-color);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.teabag__top::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 40px;
  height: 10px;
  border-radius: 10px;
  background-color: var(--main-bg);
}

.teabag__body {
  position: relative;
  width: 100%;
  height: 130px;
  padding: 30px 15px 15px;
  background-color: var(--tebag-color);
  border-radius: 0 0 2px 2px;
}

.teabag__body::before,
.teabag__body::after {
  content: "";
  position: absolute;
  bottom: 5px;
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--teabag-brewed);
  border-radius: 0 50% 50% 50%;
  rotate: 45deg;
  z-index: -1;
}

.teabag__body::before {
  left: 35px;
  animation: drop 6s ease-in 4.5s infinite;
}

.teabag__body::after {
  right: 35px;
  width: 15px;
  height: 15px;
  animation: drop 6s ease-in 4s infinite;
}

.teabag__content {
  width: 100%;
  height: 100%;
  padding: 30px 15px;
  background-color: var(--teebag-content);
  border-radius: 2px;
  transition: all .5s ease-out;
}

.teabag__eye {
  width: 20px;
  height: 10px;
}

.teabag__mouth {
  width: 20px;
  height: 10px;
  margin: 10px auto 0;
  border-radius: 0 0 150px 150px;
  background-color: var(--stroke-color);
}

.teabag__pores {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 12px);
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 20px;
  transition: all .5s ease-out;
}

.teabag__pore {
  width: 12px;
  height: 12px;
  margin: auto;
  background-color: var(--teabag-pores);
  border-radius: 50%;
}

.teabag__pore:nth-child(1),
.teabag__pore:nth-child(2),
.teabag__pore:nth-child(11),
.teabag__pore:nth-child(12),
.teabag__pore:nth-child(13),
.teabag__pore:nth-child(14) {
  grid-column-start: span 2;
}

.teabag__pore:nth-child(1),
.teabag__pore:nth-child(13) {
  margin-right: 0;
}

.teabag__pore:nth-child(2),
.teabag__pore:nth-child(14) {
  margin-left: 0;
}

.teabag__pore:nth-child(11) {
  margin-left: 0;
}

.teabag__pore:nth-child(12) {
  margin-right: 0;
}

.teabag__pore:nth-child(11),
.teabag__pore:nth-child(12) {
  margin-top: 12px;
}

.teabag__pore:nth-child(13),
.teabag__pore:nth-child(14) {
  margin-top: -8px;
}

.cup__body {
  position: relative;
  margin: 0 auto;
  width: 190px;
  height: 160px;
  padding: 40px 32px;
  border-radius: 20px 20px 50% 50%;
  background-color: var(--cup-color);
  z-index: 1;
}

.cup__eyes {
  --stroke-width: 8px;
  position: absolute;
  width: calc(100% - 64px);
}

.cup__eye {
  width: 30px;
  height: 15px;
  animation: blink 6s steps(1) infinite;
}

.cup__eye::before,
.cup__eye::after {
  animation: hidden 6s steps(1) infinite;
}

.cup__mouth {
  position: relative;
  width: 40px;
  height: 28px;
  margin: 35px auto 0;
  border-radius: 5px 5px 60% 60%;
  background-color: var(--cup-red-light);
  background-image: radial-gradient(var(--cup-red) 50%, transparent 50%);
  background-position: 0 10px;
  background-repeat: no-repeat;
}

.cup__mouth::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translatex(-50%);
  width: 85%;
  height: 10px;
  border-radius: 0 0 180% 180% / 0 0 300% 300%;
  background-color: var(--cup-color);
}

.cup__handle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  margin-left: auto;
  margin-top: -135px;
  margin: -135px -30px 0 auto;
  border-radius: 50%;
  background: linear-gradient(to right,
      var(--cup-color-shadow) 50%,
      var(--cup-color) 50%);
  z-index: 0;
}

.cup__handle::after {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: var(--main-bg);
}

.cup__saucer {
  position: relative;
  margin-top: 35px;
}

.cup__saucer::before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 300px;
  height: 50px;
  border-radius: 50%;
  background-color: #91d5f1;
  z-index: -1;
}

.cup__saucer-top {
  position: relative;
  width: 250px;
  height: 25px;
  margin-inline: auto;
  background-color: var(--cup-color);
  border-radius: 20px;
  z-index: 1;
}

.cup__saucer-bottom {
  width: 210px;
  height: 25px;
  margin: -8px auto 0;
  background: linear-gradient(to bottom,
      var(--cup-color-shadow) 60%,
      var(--cup-color) 60%);
  border-radius: 20px;
}

@keyframes blink {
  20% {
    height: 30px;
    background-color: var(--stroke-color);
    border-bottom: 8px solid var(--stroke-color);
    border-radius: 50%;
  }
}

@keyframes hidden {
  20% {
    visibility: hidden;
  }
}

@keyframes teabag {
  0% {
    transform: translateY(-200px);
  }

20% {

transform: translateY(150px);
  }

25% {
    transform: translateY(130px);
  }

35% {
    transform: translateY(150px);
  }

40% {
    transform: translateY(120px);
  }

50% {
    transform: translateY(130px);
  }

60%,
  90% {
    transform: translateY(-50px);
  }

100% {
    transform: translateY(-200px);
  }
}

@keyframes brew {
  to {
    --teebag-content: #c48473;
    --teabag-pores: #5f3c334f;
  }
}

@keyframes drop {

10%,
  100% {
    translate: 0 150px;
    opacity: 0;
  }
}

93

All

Bouncing ball

By: rald_dev

Wavy text animation

By: rald_dev

Loading Animation v2

By: rald_dev

Bouncing ball v2

By: rald_dev

Rainbow Loader Animation

By: rald_dev

Tetris Block Loader

By: pixeldev

Hamburger Menu

By: rald_dev

Basic Table with rounded corners

By: pixeldev

Hexagonal Loading Animation

By: rald_dev

Text reveal animation

By: rald_dev

Single Element Absolute Center Overlay Spinner

By: rald_dev

Tea Brewing

By: jusar