The Power of Pure CSS - No JavaScript Needed

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

54

Bouncing ball v2

By: pixeldev

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

html, body {
  background-color: rgb(23,25,31);
  font-family: "open sans";
  color: rgba(255,255,255,0.5);
  text-align: center;
}

ul {
  list-style: none;
  padding-top: 50px;
}

h1 {
  font-weight: 100;
  color: white;
}

.cont {
  width: 700px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

#button {
  cursor: pointer;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  float: left;
  transition: all 0.5s;
}

#button:hover {
  box-shadow: 0 0 12px rgba(70,150,240,0.7) inset;
  border: 1px solid rgba(255,255,255,1);
  color: rgba(255,255,255,1);
}

#button2 {
  cursor: pointer;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  float: left;
  transition: all 0.5s;
}

#button2:hover {
  box-shadow: 0 40px 12px rgba(70,150,240,0.25) inset, 0 -40px 12px rgba(70,150,240,0.25) inset;
  border: 1px solid rgba(255,255,255,1);
  color: rgba(255,255,255,1);
}

#button3 {
  cursor: pointer;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  float: left;
  transition: all 0.5s;
}

#button3:hover {
  box-shadow: 0 0 8px 4px rgba(70,150,240,0.25) inset, 0 0 8px 4px rgba(70,150,240,0.25);
  border: 1px solid rgba(70,150,240,1);
  color: rgba(255,255,255,1);
}

54

Button hover inner shadow

By: pixeldev

.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 13em;
  background: #333333;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.navigation > ul { width: 13em; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  border-right: 0.3em solid #34A65F;
  color: #ffffff;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { background: #34A65F; }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  content: '»';
  position: absolute;
  right: 1em;
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { border: 1px solid #34A65F; }

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { color: #ffffff; }

.navigation ul ul li { border-bottom: 1px solid #0F8A5F; }

.navigation ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #34A65F;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

54

Pure CSS Vertical Multi-level Navigation Menu

By: pixeldev

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

53

Single Element Absolute Center Overlay Spinner

By: pixeldev

53

Pulsating heart

By: pixeldev

<nav id="nav" class="clearfix">
<ul>
	<li>
		<a href="#">Home</a>
		<ul>
			<li><a href="#">Menu Item 1</a></li>
			<li class="submenu">
				<a href="#">Menu Item 2</a>
				<ul>
					<li><a href="#">Subitem 1</a></li>
					<li class="submenu">
						<a href="#">Subitem 2</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li><a href="#">Subitem 2</a></li>
							<li><a href="#">Subitem 3</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#">Menu Item 3</a>
				<ul>
					<li><a href="#">Subitem 1</a></li>
					<li><a href="#">Subitem 2</a></li>
					<li><a href="#">Subitem 3</a></li>
				</ul>				
			</li>
			<li><a href="#">Menu Item 4</a></li>
		</ul>
	</li>
	<li>
		<a href="#">About</a>
		<ul>
			<li><a href="#">Menu Item 1</a></li>
			<li><a href="#">Menu Item 2</a></li>
			<li><a href="#">Menu Item 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Products</a>
		<ul>
			<li class="submenu">
         	<a href="#">Menu Item 1</a>
           	<ul>
					<li><a href="#">Subitem 1</a></li>
					<li><a href="#">Subitem 2</a></li>
					<li><a href="#">Subitem 3</a></li>
				</ul>
         </li>
			<li><a href="#">Menu Item 2</a></li>
         <li><a href="#">Menu Item 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Contact</a>
	</li>
  </ul>
</nav>

@import url(https://reset5.googlecode.com/hg/reset.min.css);

/* Demo Config */
body {font-family:sans-serif}
ul, li {list-style:none; margin:0; padding:0}

/* Nav */
#nav {background-color:#2980b9}
#nav a {color:#fff; display:block; padding:15px 20px; text-decoration:none}
#nav ul li {position:relative}

/* Top Level */
#nav li {transition:background-color .5s}
#nav li:hover {background-color:#50AEED}
#nav > ul > li {display:block; float:left}

/* Sub-level 1 */
#nav > ul li:hover > ul {opacity:1; top:45px; visibility:visible}
#nav > ul ul {opacity:0; visibility:hidden; position:absolute; top:60px; transition:all .25s}
#nav > ul ul li {background-color:#3498db; width:180px}
#nav > ul ul li a {padding:10px 20px}

/* Level 2 and Beyond */
#nav > ul  ul li > ul {margin-left:180px; top:15px}
#nav > ul  ul li:hover > ul {margin-left:180px; top:0}
#nav li.submenu:after {content:"\25BA"; color:#fff; display:block; float:right; font-size:10px; height:20px; position:absolute; right:10px; top:12px}

/* Clearfix */
.clearfix:after {visibility: hidden; display: block; font-size: 0; content:" "; clear:both; height:0}

53

Pure CSS Animated Navigation Menu

By: pixeldev

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

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

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

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

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

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

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

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

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

53

Pure CSS Animated Wave

By: pixeldev

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

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

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

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

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

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

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

53

Waves animation Pure CSS

By: pixeldev

53

Colorful Border Animation

By: pixeldev

body{
	margin: 0;
	padding: 0;
	background-color: #95d0ff;
}
.container{
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    width:350px;
    height:510px;
}
.sun{
	height: 0;
	width: 0;
	position: absolute;
	top: 50px;
	left: 20px;
}
.circle{
	height: 44px;
	width: 44px;
	position: absolute;
	top: 3px;
	left: 3px;
	background-color: #ff0;
	border-radius: 50%;
}
.sunrays{
	height: 50px;
	width: 50px;
	position: relative;
	background-color: #ffdd4a;
	box-shadow: 0 0 20px 3px #ff8,
				0 0 80px 10px #ff6;
	animation: rotate 12s linear infinite;
}
@keyframes rotate{
	100%{transform: rotate(360deg);}
}
.sunrays:before{
	content: '';
	height: 50px;
	width: 50px;
	position: absolute;
	background-color: #ffdd4a;
	transform: rotate(30deg);
}
.sunrays:after{
	content: '';
	height: 50px;
	width: 50px;
	position: absolute;
	background-color: #ffdd4a;
	transform: rotate(60deg);
}
.shadow{
	position: absolute;
	width: 110px;
	height: 14px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0,0.1);
	bottom: 95px;
	left: 135px;
}
.pot{
	position: absolute;
	width: 70px;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;	
	border-top: 60px solid #FF7043;
	bottom: 104px;
	left: 125px;
	z-index: 2;
}
.pot:before{
	position: absolute;
	content: '';
	width: 87px;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;	
	border-top: 9px solid #F4511E;
	top: -60px;
	left: -12px;
}
.pot:after{
	position: absolute;
	content: '';
	width: 110px;
	height: 18px;
	top: -78px;
	left: -20px;
	border-radius: 5px;
	background-color: #FF7043;
}
.water-jar{
	position: absolute;
	width: 40px;
	height: 55px;
	background-color: #c5f;
	border-radius: 5px;
	bottom: 235px;
	left: 65px;
	opacity: 0;
	box-shadow: inset -9px 0 15px #cc70ff;
	animation: show 10s linear;
}
@keyframes show{
	5%{opacity: 1;}
	7%{transform: rotate(40deg);}
	24%{opacity: 1;}
	25%{opacity: 0;}
}
.water-jar:before{
	position: absolute;
	content: '';
	width: 15px;
	height: 0;
	left: 40px;
	top: 5px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;	
	border-bottom: 40px solid #c6f;
	transform: rotate(65deg);
}
.water-jar:after{
	position: absolute;
	content: '';
	width: 20px;
	height: 30px;
	top: 5px;
	left: -20px;
	border-radius: 20px 0 0 20px;
	background-color: transparent;
	border: 5px solid #c5f;
	box-shadow: 70px -4px 0 -6px #c6f;
}
.water{
	position: absolute;
	width: 20px;
	height: 50px;
	border-radius: 50% 50% 0 0;
	border-right: 4px dashed #0bf;
	bottom: 180px;
	left: 115px;
	z-index: 1;
	opacity: 0;
	animation: water 10s linear;
}
@keyframes water{
	7%{opacity: 0;}
	8%{opacity: 1;}
	21%{opacity: 1;}
	22%{opacity: 0;}
}
.water:before{
	position: absolute;
	content: '';
	width: 45px;
	height: 52px;
	top: -2px;
	left: -10px;
	border-radius: 70% 80% 20% 0;
	border-right: 4px dashed #0bf;
	z-index: 1;
}
.water:after{
	position: absolute;
	content: '';
	width: 65px;
	height: 62px;
	top: -10px;
	left: -10px;
	border-radius: 70% 90% 28% 0;
	border-right: 4px dashed #0bf;
	z-index: 1;
}
.flower{
	position: absolute;
	bottom: 180px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 50px;
	transform: rotate(180deg);
}
.stem{
	position: absolute;
	left: 25px;
	width: 5px;
	height: 0px;
	background: linear-gradient(-90deg, #0d0, #0a0);
	animation: grow 10s linear forwards;
}
@keyframes grow{
	25%{height: 0;}
	34%{height: 22px;}
	39%{height: 22px;}
	41%{height: 27px;}
	45%{height: 27px;}
	52%{height: 92px;}
	55%{height: 94px;}
	100%{height: 120px;}
}
.leaf{
	position: absolute;
	width: 25px;
	top: -10px;
	left: 18px;
	height: 38px;
	border-radius: 1% 100%;
	background: linear-gradient(70deg, #0e0, #0a0);
	transform-origin: bottom;
	transform: rotate(-110deg);
	animation: leaf-1 10s linear;
}
@keyframes leaf-1{
	0%{transform: scaleY(0) rotate(-180deg);}
	38%{transform: scaleY(0) rotate(-110deg);}
	50%{transform: scaleY(1) rotate(-110deg);}
}
.leaf:before{
	position: absolute;
	content: '';
	top: 18px;
	left: -33px;
	width: 30px;
	height: 45px;
	border-radius: 1% 100%;
	background: linear-gradient(70deg, #0e0, #0a0);
	transform: rotate(110deg);
	animation: leaf-2 10s linear;
}
@keyframes leaf-2{
	0%{transform: scaleY(0) rotate(110deg);}
	45%{transform: scaleY(0) rotate(110deg);}
	52%{transform: scaleY(1) rotate(110deg);}
}
.leaf:after{
	position: absolute;
	content: '';
	top: -20px;
	left: -60px;
	width: 25px;
	height: 35px;
	border-radius: 1% 100%;
	background: linear-gradient(70deg, #0e0, #0a0);
	transform-origin: bottom;
	animation: leaf-3 10s linear;
}
@keyframes leaf-3{
	0%{transform: scaleY(0);}
	55%{transform: scaleY(0);}
	72%{transform: scaleY(1);}
}
.dot{
	position: absolute;
	top: 147px;
	left: 24px;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background-color: #f8d545;
	box-shadow: 0 0 0 4px #d85,
				0 0 8px 4px #444,
				inset 0 0 8px #fd0;
	opacity: 0;
	animation: flower 10s linear forwards;
}
@keyframes flower{
	72%{opacity: 0;}
	74%{opacity: 1;}
	100%{opacity: 1;}
}
.petal{
	position: absolute;
	width: 0px;
	height: 40px;
	border-radius: 100% 0% 50% 50% /50% 0% 100% 50%;
	background: linear-gradient(
	185deg,
    #941346 0%,
    #E63B94 50%,
    #FF5AB0 75%,
    #FF7DC1 100%
  );
	opacity: 0;
	animation: petal 10s linear forwards;
}
@keyframes petal{
	72%{opacity: 0;}
	84%{opacity: 1; width: 40px;}
	100%{opacity: 1; width: 40px;}
}
.petal-1{
	top: 155px;
	left: -9px;
}
.petal-2{
	top: 125px;
	left: -18px;
	transform: rotate(60deg);
}
.petal-3{
	top: 105px;
	left: 5px;
	transform: rotate(120deg);
}
.petal-4{
	top: 110px;
	left: 35px;
	transform: rotate(180deg);
}
.petal-5{
	top: 140px;
	left: 42px;
	transform: rotate(240deg);
}
.petal-6{
	top: 160px;
	left: 18px;
	transform: rotate(300deg);
}

53

Growing Flower Plant Animation

By: pixeldev

<ul class="navigation">
	<li class="nav-item"><a href="#">Home</a></li>
	<li class="nav-item"><a href="#">Portfolio</a></li>
	<li class="nav-item"><a href="#">About</a></li>
	<li class="nav-item"><a href="#">Blog</a></li>
	<li class="nav-item"><a href="#">Contact</a></li>
</ul>

<div class="site-wrap">
	
  <h1>Pure CSS Off-Screen Menu</h1>
  <h3>Finally, an off-screen menu that doesn't require a bunch of Javascript to work. </h3>
  
  <p>This concept relies on the <code>:checked</code> pseudo-selector as well as the general sibling <code>~</code> selector, so it has decent browser support.</p>
  <p><strong>Browsers supported:</strong> IE9+, Firefox 3.5+, Chrome any, Safari 3.2+, Opera 9.5+</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi vero nisi eos sed qui natus, ut eius reprehenderit error nesciunt veniam aliquam nulla itaque labore obcaecati molestiae eveniet, perferendis provident amet perspiciatis expedita accusantium! Eveniet, quos voluptas et, labore natus, saepe unde est nulla sit eaque tempore debitis accusantium. Recusandae.</p>
  <p>Dolorem aliquam a libero reiciendis obcaecati doloribus ipsa eos laudantium, dicta in! Odit iure ut ratione, dolorum cupiditate perferendis voluptatum sapiente, dignissimos sunt necessitatibus, reprehenderit consequatur dolorem. Aliquam veniam quaerat, pariatur deserunt reiciendis vero vitae, repellat omnis sequi dolor nesciunt. Nihil similique alias impedit, obcaecati eligendi delectus voluptatum! Ipsum, vel.</p>
  <p>Sint, perspiciatis nemo aut, rerum excepturi deleniti modi quos nihil corporis eum, maiores soluta labore, consectetur eligendi nesciunt. Placeat, incidunt! Illum placeat eligendi, veritatis consectetur eum! Dolor obcaecati minima ab placeat voluptatem neque modi doloribus, magnam qui voluptate eaque in. Nulla expedita hic porro architecto facere officiis vitae numquam, dolor!</p>
  <p>Perferendis quis ea incidunt ducimus nisi voluptate natus. Repellat asperiores quod rerum rem quos blanditiis enim modi, veniam voluptas a facilis! Velit cum omnis, voluptatum eum inventore! Corrupti, suscipit, neque distinctio expedita est laboriosam cum aliquid minus tempora quaerat officia possimus unde vel deleniti eaque fugit accusamus iusto dolorum natus.</p>
  
  <p>Demo by Austin Wulf. <a href="http://www.sitepoint.com/pure-css-off-screen-navigation-menu">See article</a>.</p>
</div>

/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 4em;
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  background-size: 200%;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

body {
	/* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}

/* Additional non-critical styles */

h1, h3, p {
  max-width: 600px;
  margin: 0 auto 1em;
}

code {
	padding: 2px;
	background: #ddd;
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }

53

Pure CSS Off-Screen Navigation Menu

By: pixeldev

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

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

52

All

Bouncing ball v2

By: pixeldev

Button hover inner shadow

By: pixeldev

Pure CSS Vertical Multi-level Navigation Menu

By: pixeldev

Single Element Absolute Center Overlay Spinner

By: pixeldev

Pulsating heart

By: pixeldev

Pure CSS Animated Navigation Menu

By: pixeldev

Pure CSS Animated Wave

By: pixeldev

Waves animation Pure CSS

By: pixeldev

Colorful Border Animation

By: pixeldev

Growing Flower Plant Animation

By: pixeldev

Pure CSS Off-Screen Navigation Menu

By: pixeldev

Pure CSS Pricing Table

By: pixeldev