The Power of Pure CSS - No JavaScript Needed

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  
  body {
    min-height: 100vh;
    background: #000;
  }
  
  .container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    animation: color-change 4s infinite;
  }
  
  @keyframes color-change {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }
  
  .row {
    display: inline-flex;
    margin-top: -32px;
    margin-left: -50px;
  }
  .row:nth-child(even) {
    margin-left: 1px;
  }
  
  .hexagon {
    position: relative;
    width: 100px;
    height: 110px;
    background: #111;
    margin: 1.5px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: 1s;
  }
  
  .hexagon:hover {
    transition: 0s;
    background: cyan;
  }
  
.hexagon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  opacity: 0.015;
  pointer-events: none;
  background: #fff;
  
}
  .hexagon::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.02);
    background: #111;
  }

72

Pure CSS Hexagonal Border with Glow Hover effect

By: pixeldev

body{
  background:-webkit-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-moz-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-ms-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-o-radial-gradient(circle,#f6b5ff, #e081ef);
  background:radial-gradient(circle,#f6b5ff, #e081ef);
}
#slider{
  width:630px;
  border:4px solid #fff;;
  outline:1px solid #999;
  height:313px;
  margin:-315px auto;
  background:-webkit-radial-gradient(#ffefce, #fcd78d);
  background:-moz-radial-gradient(#ffefce, #fcd78d);
  background:-ms-radial-gradient(#ffefce, #fcd78d);
  background:-o-radial-gradient(#ffefce, #fcd78d);
  background:radial-gradient(#ffefce, #fcd78d);
}
#allpic{
  width:70px;
  height:300px;
  background:#ccc;
  margin:5px 0 0 5px;
  float:left;
  transition:all .5s ease-out;
  overflow:hidden;
  border:2px solid #fff;;
  outline:1px solid #999;
}
#allpic:hover {
  width:300px;
}
#shadow{
  width:600px;
  height:30px;
  margin:330px auto 0;
  border-radius:50%;
  box-shadow:0px 12px 10px 3px rgba(0,0,0, 0.5);
}

72

Pure CSS with no arrows

By: pixeldev

72

infinite logo carousel with pure CSS

By: pixeldev

.center {
    text-align:center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

71

Rainbow Background

By: pixeldev

71

Fluid Animation

By: pixeldev

.codepen-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.book {
  height: 15rem;
  width: 15rem;
  font-size: 1.4rem;
  box-shadow: 1rem 2rem 3rem rgba(0, 0, 0, 0.25);
  text-align: center;
  position: relative;
  color: #484e4a;
}

.page {
  width: 100%;
  height: 15rem;
  perspective: 1500px;
  position: relative;
}

/* Front of first page */
.page__1 {
  background-color: #0D5C63;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 1s 0.3s;
  transform-origin: 0 50%;
  z-index: 2;
}

/* Back of first page */
.page__1::after {
  content: "Neat, huh?";
  color: #eff0eb;
  position: absolute;
  padding-top: 1.5rem;
  top: 0;
  left: 0;
  background-color: #424B54;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transform: rotateY(180deg);
  transition: all 0.3s 0.5s;
}

/* Front of second page */
.page__2 {
  background-color: #BAA898;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

/* Hover effect for flipping the page */
.page:hover .page__1 {
  transform: rotateY(-180deg);
  box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, 0.25);
}

/* Hover effect for back of first page */
.page:hover .page__1::after {
  opacity: 1;
}

70

Pure CSS Card Open Animation

By: pixeldev

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

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

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

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

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

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

70

Box border animation

By: pixeldev

70

Pure CSS Nav Menu challenge

By: pixeldev

70

html lists like tables

By: pixeldev

body {
	font-family: 'Montserrat', sans-serif;
}
.textContainer {
	width: 100%;
	height: 100vh;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}
h1 {
	position: relative;
	text-transform: uppercase;
	font-size: 50px;
	letter-spacing: 2px;
	margin-bottom: 20px;
	color: red;
	justify-content: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
span {
	display: inline-block; 
	position: relative; 
}
.bouncingAnim {
	justify-content: center;
	align-items: flex-end;
}
.bouncingAnim span.ml_25 {margin-left: 25px;}
.bouncingAnim span:nth-child(1) {animation: bounce 2.3s ease-in-out infinite; }
.bouncingAnim span:nth-child(2) {animation: bounce 2.3s ease-in-out .33s infinite; }
.bouncingAnim span:nth-child(3) {animation: bounce 2.3s ease-in-out 0.66s infinite; }
.bouncingAnim span:nth-child(4) {animation: bounce 2.3s ease-in-out 0.99s infinite; }
.bouncingAnim span:nth-child(5) {animation: bounce 2.3s ease-in-out 1.33s infinite; }
.bouncingAnim span:nth-child(6) {animation: bounce 2.3s ease-in-out 1.66s infinite; }
.bouncingAnim span:nth-child(7) {animation: bounce 2.3s ease-in-out 1.99s infinite; }
.bouncingAnim span:nth-child(8) {animation: bounce 2.3s ease-in-out 2.33s infinite; }
.bouncingAnim span:nth-child(9) {animation: bounce 2.3s ease-in-out 2.66s infinite; }
.bouncingAnim span:nth-child(10) {animation: bounce 2.3s ease-in-out 2.99s infinite; }

@-webkit-keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

25%{
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
    opacity: .5;
  }
}
@keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

25%{
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
    opacity: .5;
  }
}

70

Wave Text Animation Pure CSS

By: pixeldev

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

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

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

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

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

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

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

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

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

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

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

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

70

Circle Animation Loader

By: pixeldev

70

All

Pure CSS Hexagonal Border with Glow Hover effect

By: pixeldev

Pure CSS with no arrows

By: pixeldev

infinite logo carousel with pure CSS

By: pixeldev

Rainbow Background

By: pixeldev

Fluid Animation

By: pixeldev

Pure CSS Card Open Animation

By: pixeldev

Box border animation

By: pixeldev

Pure CSS Nav Menu challenge

By: pixeldev

html lists like tables

By: pixeldev

Wave Text Animation Pure CSS

By: pixeldev

Circle Animation Loader

By: pixeldev

Hexagon Wall – Pure CSS

By: pixeldev