The Power of Pure CSS - No JavaScript Needed

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

68

Pure CSS with no arrows

By: pixeldev

<details>
   <summary>Question 1</summary>
   <p>Just use a <code>details</code> and <code>summary</code> tags with a little CSS, no more JS. You can use any text or emoji as caret.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora in nihil, deleniti saepe optio corrupti dolorum perferendis hic iure, maiores quae vitae provident minus, ipsum, aut tempore facilis doloremque rem.</p>
 </details>

<details>
   <summary>Question 2</summary>
   <p>Ipsa veritatis inventore reprehenderit dolorem, officiis. Quaerat doloribus voluptatibus impedit repellat quae perspiciatis nesciunt, recusandae facilis unde fugit et eaque rem voluptatum perferendis libero veniam rerum aliquam eos minima voluptate.</p>
 </details>

<details>
   <summary>Question 3</summary>
   <p>Quisquam, necessitatibus quo dolore sequi suscipit magni, voluptatum debitis, accusantium dolorum officia beatae rerum similique optio saepe vel dicta facere modi, voluptatem culpa expedita quaerat eum reprehenderit dolores. Assumenda, doloremque!</p>
 </details>

<details>
   <summary>Question 4</summary>
   <p>Dolorum quaerat facilis magnam commodi molestiae atque similique hic enim pariatur nulla magni amet iusto soluta nemo alias odit recusandae repudiandae dignissimos, fugit asperiores quia eius necessitatibus iure. Possimus, illum.</p>
 </details>

<details>
   <summary>Question 5</summary>
   <p>Consequuntur voluptate consequatur sed adipisci libero temporibus atque itaque voluptas eos, rerum vero qui. Adipisci illum, molestias commodi unde necessitatibus ea, quod explicabo, deleniti voluptatem aliquam reprehenderit, nobis maiores. Saepe?</p>
 </details>

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
	*{
			box-sizing: border-box;
			transition: 0.25s;
		}
		body{
      font: 18px/1.5 'Abel',system-ui, sans-serif;
			padding: 0 2rem;
			background: #000E;
			color: dimgray;
    }
    h1{
      text-align: center;
      font-size: 3rem;
      padding-bottom: 0.25em;
      border-bottom: 1px solid silver;
      border-image: linear-gradient(to right, transparent 20%, darkslategrey, transparent 80%)30;
    }
/*** Specific styles ***/
    details{
      margin-bottom: 1rem;
      padding: 1rem;
      border-radius: 0.25rem;
			border: 1px solid silver;
    }
    summary{
		  list-style-type: '✔  ';
      font-size: 1.25rem;
      font-weight: bold;
      cursor: pointer; 
      position: relative;
			outline: none;
			color: silver;
    }
    summary::after{
      content: "🔻";
      padding: 0.5rem;
      position: absolute;
      right: 0.25rem;
      top: -0.5rem;
      color: whitesmoke;
    }
    details[open]{
			background: whitesmoke;
    }
	details[open] summary{
		color: dimgrey;
	}
    details[open] summary::after{
      content: "🔺";
    }
/*** End specific styles ***/
    p{
      color: dimgrey;
      letter-spacing: 1.5;
    }

68

Simple Accordion FAQ vanilla CSS

By: pixeldev

68

infinite logo carousel with pure CSS

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

67

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

67

Box border animation

By: pixeldev

.center {
    text-align:center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

67

Rainbow Background

By: pixeldev

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	--spd: 2s; /* change speed */	
	--u: 0.4vmin;
	--r1: calc(var(--u) * 4);
	--r2: calc(var(--u) * 4.1);
	--r3: calc(var(--u) / 12);
	--r4: calc(var(--u) / 2.5);
	--r5: calc(var(--u) / 2.25);
	--r6: calc(var(--u) / 2);
	--c0: #1a1a1a;
	--c1: #1c1c1c;
	--c2: #404040;
	--c3: #525252;
	--c4: #808080;
	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 16.8);
	--border-fix: var(--c0) 0 25%, #fff0 0 100%;
	--screw1: var(--c4) var(--r3), #fff0 var(--r4);
	--screw2: var(--c0), var(--c1) var(--r5), #fff0 var(--r6);
	--hole1: var(--c0) var(--r1), #fff0 var(--r2) 100%;
	--hole2: var(--c1) var(--r1), #fff0 var(--r2) 100%;
	--hole3: var(--c4) var(--r1), #fff0 var(--r2) 100%;
	height: 100vh;
	background: /* border fix */ conic-gradient(from 225deg at 40% 50%, var(--border-fix)) var(--gp), conic-gradient(from 45deg at 60% 50%, var(--border-fix)) var(--gp), conic-gradient(from -45deg at 50% 24%, var(--border-fix)) var(--gp), conic-gradient(from 135deg at 50% 76%, var(--border-fix)) var(--gp), /* screws */ radial-gradient(circle at 99.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 84%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 84%, var(--screw2)) var(--gp), radial-gradient(circle at 99.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 17%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 17%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 67.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 68%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 31.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 32%, var(--screw2)) var(--gp), /* holes */ radial-gradient(circle at 100% 50%, var(--hole1)) var(--gp), radial-gradient(circle at 98% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 102% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 0% 50%, var(--hole1)) var(--gp), radial-gradient(circle at -2% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 2% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 100%, var(--hole1)) var(--gp), radial-gradient(circle at 48% 98%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 102%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 0%, var(--hole1)) var(--gp), radial-gradient(circle at 48% -2%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 2%, var(--hole3)) var(--gp), /*background*/ linear-gradient(0deg, var(--c2) 33%, #ffffff20 55% 65%, var(--c3) 70% );
	background-color: var(--c2);

}

body:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #fff0 0 41.35%, #585858 41.55% 44%, #0e0e0e 44%, #1c1c1c 50%, #0e0e0e 56%, #494949 56% 58.425%, #fff0 58.475% 100%);
	background: linear-gradient(180deg, #fff0 0 41.5%, #585858 41.6% 44%, #0e0e0e 44%, #1c1c1c 45% 55%, #0e0e0e 56%, #494949 56% 58.55%, #fff0 58.6% 100%);
}

.content {
	width: 100vmin;
	height: 100vmin;
}

.content:before {
	content: "";
	width: 70vmin;
	height: 70vmin;
	position: absolute;
	left: calc(50% - 35vmin);
	border-radius: 100%;
	top: calc(50% - 35vmin);
	box-shadow: 0.5vmin 0.5vmin 1vmin #0a0a0a, -0.5vmin -0.5vmin 1vmin #222;
}

.door {
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #000, #0b102e);
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	clip-path: circle(35.4% at 50% 50%);
}

.door:before {
	content: "";
	width: 200%;
	height: 200%;
	position: absolute;
	left: -50%;
	background-image: 
		repeating-conic-gradient(#FFF9 0%, transparent .0004%, transparent .004%, transparent .074%), 
		radial-gradient(ellipse at 20% 30%, #80008030, #80008020, #ffa50030, #fff0, #fff0);
	animation: spin 500s linear 0s infinite;
	border-radius: 100%;
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}

.door:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 222;
	box-sizing: border-box;
	border-radius: 100%;
	background: radial-gradient(#fff0 0 40%, #858585 calc(40% + 1px), #686868 43% 46% , #484848 50%, #3330 calc(50% + 1px) 100%);
	filter: drop-shadow(-2px -2px 5px #0009);
	box-shadow: -5vmin -5vmin 5vmin 10vmin #222 inset, 5vmin 5vmin 5vmin 10vmin #cdcdcd inset;
}

body:hover .panel {
	animation-duration: 1s;
}

.panel {
	--p: #999999;
	--p1: #787878;
	--p2: #4e4e4e;
	--rin: var(--p2) 0 0.5vmin, var(--p1) calc(0.5vmin + 1px) 0.75vmin, var(--p2) calc(0.75vmin + 1px) 1.25vmin, #f000 calc(1.25vmin + 1px) 100%;
	--con: var(--p2) 0 60deg, #fff0 0 100%;
	--lin: #fff0 33%, var(--p1) calc(33% + 1px), #fff0 calc(33% + 2px);
	animation: start1 var(--spd) ease-in-out 0s 1;
	--tri: var(--p2) 0deg, var(--p) 30deg, var(--p2) 60deg, #fff0 0 100%;
	--rad: #999999 0, #434343 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%;
	width: 57.5%;
	height: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transition: all 2s ease 0s;
	filter: drop-shadow(0px 0px 1px #222);
	background: linear-gradient(120deg, var(--lin)), radial-gradient(circle at 50% 4.75vmin, var(--rin)), radial-gradient(circle at 50% 5%, var(--rad)), conic-gradient(from 150deg at 50% 7%, var(--tri)), conic-gradient(from 150deg at 50% 0%, var(--p2) 0 60deg, #fff0 0 100%);

}

.panel:nth-child(2) {
	background: 
		linear-gradient(60deg, var(--lin)),
		radial-gradient(circle at 3.55vmin 2.35vmin, var(--rin)),  
		radial-gradient(circle at 3% 2.5%, var(--rad)),
		conic-gradient(from 90deg at 5% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	left: 64.5%;
	top: 25%;
	animation-name: start2;
}

.panel:nth-child(3) {
	background: 
		linear-gradient(0deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 3.55vmin 95.5%, var(--rin)), 
		radial-gradient(circle at 3% 98%, var(--rad)),
		conic-gradient(from 30deg at 5% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	left: 35.5%;
	top: -25%;
	animation-name: start3;
}

.panel:nth-child(4) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		radial-gradient(circle at 50% 91%, var(--rin)), 	
		radial-gradient(circle at 50% 96%, var(--rad)),
		conic-gradient(from -30deg at 50% 93%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	top: 0;
	left: -7.75%;
	animation-name: start4;
}
.panel:nth-child(5) {  
	background: 
		linear-gradient(-120deg, var(--lin)),
		radial-gradient(circle at 93.5% 95%, var(--rin)), 		
		radial-gradient(circle at 97% 98%, var(--rad)),
		conic-gradient(from 270deg at 95% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	top: 25%;
	left: -22.25%;
	animation-name: start5;
}

.panel:nth-child(6) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		linear-gradient(180deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 93.5% 5%, var(--rin)), 	
		radial-gradient(circle at 97% 2.5%, var(--rad)),
		conic-gradient(from 210deg at 95% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--p2) 60deg, #fff0 0 100%);
	top: 75%;
	left: 7%;
	animation-name: start6;
}

.door:hover .panel:nth-child(1) {
	left: calc(50% - 28.75% );
}

.door:hover .panel:nth-child(2) {
	left: 50%;
	top: 50%;
}

.door:hover .panel:nth-child(3) {
	left: 50%;
	top: 0;
}

.door:hover .panel:nth-child(4) {
	left: calc(50% - 28.75%);
	top: 0;
}

.door:hover .panel:nth-child(5) {
	top: 0;
	left: -7.65%;
}

.door:hover .panel:nth-child(6) {
	left: -7.5%;
	top: 50%;	
}

@keyframes start1 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: 50%; }
}

@keyframes start2 {
	0% { top: 50%; left: 50%; }
	100% { top: 25%; left: 64.5%; }
}

@keyframes start3 {
	0% { top: 0;    left: 50%; }
	100% { top: -25%; left: 35.5%; }
}

@keyframes start4 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: -7.75%; }
}

@keyframes start5 {
	0% { top: 0;   left: -7.65%; }
	100% { top: 25%; left: -22.25%; }
}

@keyframes start6 {
	0% { top: 50%; left: -7.5%; }
	100% { top: 75%; left: 7%; }
}

66

Iris Door (hexagonal) – Pure CSS

By: pixeldev

66

Fluid Animation

By: pixeldev

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@james</td>
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@andornagy</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@tamas</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@zoli</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@szabi</td>
    </tr>
  </tbody>
</table>

table { 
	width: 750px; 
	border-collapse: collapse; 
	margin:50px auto;
	}

/* Zebra striping */
tr:nth-of-type(odd) { 
	background: #eee; 
	}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	text-align: left; 
	font-size: 18px;
	}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

table { 
	  	width: 100%; 
	}

/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}

td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

color: #000;
		font-weight: bold;
	}

}

65

Pure CSS Responsive Table.

By: pixeldev

<div class="cat-container">
  <div class="cat-size cat-one">
    <a class="b" href="https://lenadesign.org/html/" target="_blank">
    <div class="center">
        <h1 class="title-html">HTML</h1></a>
    <p class="textHTML">HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
      <a class="a" href="https://lenadesign.org/html/" target="_blank"><p class="learnHTML">LEARN HTML></p></a>
    </div>
    </div>
  
    <div class="cat-size cat-two">
      <div class="center">
        <a class="b" href="https://lenadesign.org/css/" target="_black">
          <h1 class="title-css">CSS</h1></a>
      <p class="textCSS">CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p>
        <a class="a" href="https://lenadesign.org/css/" target="_black">
          <p class="learnCSS">LEARN CSS></p></a>
      </div>
    </div>
    <div class="cat-size cat-three">
      <div class="center">
        <a class="b" href="https://lenadesign.org/javascript/" target="_blank">
          <h1 class="title-js">JavaScript</h1></a>
      <p class="textJS">JavaScript is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.</p>
        <a class="a" href="https://lenadesign.org/javascript/" target="_blank">
          <p class="learnJS">LEARN JavaScript></p></a>
      </div>
    </div>
    <div class="cat-size cat-four">
      <div class="center">
        <a class="b" href="https://lenadesign.org/jquery/" target="_blank">
          <h1 class="title-jQ">jQuery</h1></a>
      <p class="textJQ">jQuery is a JavaScript library created to simplify and make it easier to write JavaScript and HTML.</p>
        <a class="a" href="https://lenadesign.org/jquery/" target="_blank">
          <p class="learnJQ">LEARN jQuery></p></a>
      </div>
    </div>
    <div class="cat-size cat-five">
      <div class="center">
        <a class="b" href="https://lenadesign.org/svg-4/" target="_blank">
          <h1 class="title-svg">SVG</h1></a>
      <p class="textSVG">SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.</p>
        <a class="a" href="https://lenadesign.org/svg-4/" target="_blank">
          <p class="learnSVG">LEARN SVG></p></a>
      </div>
    </div>
    <div class="cat-size cat-six">
      <div class="center">
         <a class="b" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
           <h1 class="title-a">Animations</h1></a>
      <p class="textA">Learn how to create amazing animations using HTML, CSS and JavaScript!</p>
        <a class="a" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
          <p class="learnA">Animations></p></a>
      </div>
    </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');

body {
  margin:0;
  padding:0;
}

.cat-container {
	position: relative;
	height: 100vh;
	width: 100%;
  display: -webkit-flex;
	display: flex;
  font-family: 'Fira Sans', sans-serif;
	overflow: hidden;
  color: white;
}

@media screen and (max-width: 768px) {
  .cat-container {flex-direction: column;}
}

@media screen and (max-width: 480px) {
  .cat-container {flex-direction: column;}
}

.cat-size {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content:center;
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
}

.cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six {
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;
	-moz-transition: flex-grow .3s;
	-ms-transition: flex-grow .3s;
	-o-transition: flex-grow .3s;
  width:100%;
  height: 100vh;
}

.cat-one {
  background-color: #56ab91;
}

.cat-two {
  background-color: #469d89;
}

.cat-three {
  background-color: #4358f80;
}

.cat-three {
  background-color: #358f80;
}

.cat-four {
  background-color: #248277;
}

.cat-five {
  background-color: #14746f;
}

.cat-six {
  background-color: #036666;
}

.cat-one:hover {
  flex-grow: 3;
}

.cat-two:hover {
  flex-grow: 3;
}

.cat-three:hover {
  flex-grow: 3;
}

.cat-four:hover {
  flex-grow: 3;
}

.cat-five:hover {
  flex-grow: 3;
}

.cat-six:hover {
  flex-grow: 3;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 2;
  text-align: center;
  width:100%;
  height: 100vh;

}

.title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {
  writing-mode: vertical-rl; 
  margin: 30px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.cat-one:hover .title-html {
  writing-mode: horizontal-tb; 
}

.cat-two:hover .title-css {
  writing-mode: horizontal-tb; 
}

.cat-three:hover .title-js {
  writing-mode: horizontal-tb; 
}

.cat-four:hover .title-jQ {
  writing-mode: horizontal-tb; 
}

.cat-five:hover .title-svg {
  writing-mode: horizontal-tb; 
}

.cat-six:hover .title-a {
  writing-mode: horizontal-tb; 
}

@media screen and (max-width: 768px) {
  .title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {writing-mode: horizontal-tb !important; 
  }
  .textHTML, .learnHTML, .textCSS, .learnCSS, .textJS, .learnJS, .learnJQ, .textJQ, .learnA, .textA, .learnSVG, .textSVG {
    display: none !important;
  }
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA, .learnHTML, .learnCSS, .learnJS, .learnJQ, .learnSVG, .learnA {
  display: none;
}

.cat-one:hover .textHTML {
 display: block;
 animation: up .5s ease forwards;
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA {
  width:50%;
  border: 3px solid white;
  border-radius:20px;
  padding:20px;
}

.cat-one:hover .learnHTML {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .learnCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .learnJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .textJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .textCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .textJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .learnJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .learnSVG {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .learnA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .textA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .textSVG {
 display: block;
 animation: up .5s ease forwards;
}

@keyframes up {
  0% {opacity:0; transform: translateY(50px);}
  50% {opacity:0; transform: translateY(50px);}
  100% {{opacity:1; transform: translateY(0px);}}
}

.a {
  text-decoration: underline;
  color: white;
}

.b {
  text-decoration: none;
  color: white;
}

65

Pure CSS Responsive Navigation Menu (sliding effect)

By: pixeldev

65

Card masonry layout 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;}
}

65

All

Pure CSS with no arrows

By: pixeldev

Simple Accordion FAQ vanilla CSS

By: pixeldev

infinite logo carousel with pure CSS

By: pixeldev

Pure CSS Card Open Animation

By: pixeldev

Box border animation

By: pixeldev

Rainbow Background

By: pixeldev

Iris Door (hexagonal) – Pure CSS

By: pixeldev

Fluid Animation

By: pixeldev

Pure CSS Responsive Table.

By: pixeldev

Pure CSS Responsive Navigation Menu (sliding effect)

By: pixeldev

Card masonry layout Pure CSS

By: pixeldev

Circle Animation Loader

By: pixeldev