The Power of Pure CSS - No JavaScript Needed

* {
    box-sizing: border-box;
}

#overlay {
    background: #f0f0f0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.circle {
    border-radius: 50%;
}

.bg {
    width: 300px;
    height: 300px;
    background: #000;
    border: solid 5px #0088ff;
}
.outermost {
    width: 255px;
    height: 255px;
    border: solid 10px rgba(0, 0, 0, 0);
    border-bottom: solid 10px #0088ff;
    border-left: solid 10px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 5s linear infinite;
}
.outer {
    width: 250px;
    height: 250px;
    border: solid 5px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.middle {
    width: 215px;
    height: 215px;
    border: solid 12px rgba(0, 0, 0, 0);
    border-bottom: solid 12px #005aa8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin2 3.5s linear infinite reverse;
}
.middle2 {
    width: 215px;
    height: 215px;
    border: solid 6px rgba(0, 0, 0, 0);
    border-top: solid 6px #005aa8;
    border-right: solid 6px #005aa8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 3.5s linear infinite reverse;
}
.middle3 {
    width: 205px;
    height: 205px;
    border: solid 30px rgba(0, 0, 0, 0);
    border-top: solid 30px #0088ff4b;
    border-right: solid 30px #0088ff4b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 3.5s linear infinite reverse;
}
.inner {
    width: 140px;
    height: 140px;
    border: solid 5px #0088ff;
    border-bottom: solid 5px rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    animation: spin2 2s linear infinite;
}
.innermost3 {
    width: 35px;
    height: 35px;
    background: #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.innermost2 {
    width: 80px;
    height: 80px;
    border: solid 13px #0088ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.innermost {
    width: 115px;
    height: 115px;
    border: solid 13px #0088ff;
    border-top: solid 13px rgba(0, 0, 0, 0);
    border-bottom: solid 13px rgba(0, 0, 0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite reverse;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes spin2 {
    0% {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(405deg);
    }
}

56

J.A.R.V.I.S Animation

By: pixeldev

56

Card masonry layout Pure CSS

By: pixeldev

56

Simple Slide Animation

By: pixeldev

.wheel{
	border: 2px solid black;
	border-radius: 50%;
	margin-left: 50px;
	position: absolute;
	width: 55vw;
	height: 55vw;
	max-height: 500px;
	max-width: 500px;
	animation-name: wheel;
	animation-duration: 10s;/*Time of the animation*/
	animation-iteration-count: infinite;/*How many times the animation repeats*/
	animation-timing-function: linear;/*How the animation should progress over time*/
}

/********LINES********/

.line{
	
	background-color: black;
	width: 50%;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 0% 0%;
}

/******Line types*********/

.line:nth-of-type(2){
	transform: rotate(60deg);
}

.line:nth-of-type(3){
	transform: rotate(120deg);
}

.line:nth-of-type(4){
	transform: rotate(180deg);
}

.line:nth-of-type(5){
	transform: rotate(240deg);
}

.line:nth-of-type(6){
	transform: rotate(300deg);
}

/********CABINS**********/

.cabin{
	background-color: red;
	width: 20%;
	height: 20%;
	position: absolute;
	border: 2px solid;
	transform-origin: 50% 0%;
	animation: cabins 10s ease-in-out infinite;/*animation-name, animation-duration, animation-timing-function, animation-iteration-count*/
}

/*******Cabin types*********/

.cabin:nth-of-type(1){
	right: -8.5%;
	top: 50%;
}

.cabin:nth-of-type(2){
	right: 17%;
	top: 93.5%;
}

.cabin:nth-of-type(3){
	right: 67%;
	top: 93.5%;
}

.cabin:nth-of-type(4){
	left: -8.5%;
	top: 50%;
}

.cabin:nth-of-type(5){
	left: 17%;
	top: 7%;
}

.cabin:nth-of-type(6){
	right: 17%;
	top: 7%;
}

/**********K E Y F R A M E S*************/

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

@keyframes cabins{
	0%{
		transform: rotate(0deg);		
	}
	
	25%{
		background-color: yellow;
	}
	
	50%{
		background-color: purple;
	}
	
	75%{
		background-color: yellow;
	}
	
	100%{
		transform: rotate(-360deg);
	}	
}

56

Ferris Wheel Animation

By: pixeldev

html,
body {
  height: 100%;
  margin: 0px;
}

.slider-container {
  background: linear-gradient(
    149deg,
    rgb(247, 0, 255) 0%,
    rgb(255, 145, 0) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slider {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 20px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.slide:nth-of-type(even) {
  background-color: rgb(250, 246, 212);
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 400px;
  scroll-snap-align: center;
  margin-right: 0px;
  box-sizing: border-box;
  background: white;
  transform-origin: center center;
  transform: scale(1);
}

.slide__text {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

.slide a {
  background: none;
  border: none;
}

a.slide__prev,
.slider::before {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 5%;
}

a.slide__next,
.slider::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 5%;
}

.slider::before,
.slider::after,
.slide__prev,
.slide__next {
  position: absolute;
  top: 48%;
  width: 35px;
  height: 35px;
  border: solid black;
  border-width: 0 4px 4px 0;
  padding: 3px;
  box-sizing: border-box;
}

.slider::before,
.slider::after {
  content: "";
  z-index: 1;
  background: none;
  pointer-events: none;
}

.slider__nav {
  box-sizing: border-box;
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  text-align: center;
}

.slider__navlink {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0 10px 0 10px;
}

.read-article{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  color: #000;
  background: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: arial;
  text-decoration: none;
  box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
    background: #d5d5d5;
    box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
  display: none;
}

56

Pure CSS Slider – fullPage blog

By: pixeldev

56

Line Animation

By: pixeldev

@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
	margin: 0px;
}

#circle-container {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: lightblue;
	width: 100vw;
	height: 100vh;
	position: relative;
}

.circle {
	width: 50vh;
	height: 50vh;
	position: absolute;
	border-radius: 50%;
}

#one:before {
	content: "Hover Me!";
}

#one {
	background-color: rgba(0,0,225, 0.45);
	font-size: 40px;
	font-family: "Oswald", sans-serif;
	letter-spacing: 1.5px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: bold;
	transition: 1s;
}

#two {
	background-color: green;
	transition: 1s;
	opacity: 0.5;
}

#three {
	background-color: red;
	transition: 1s;
	opacity: 0.5;
}

#four {
	background-color: orange;
	transition: 1s;
	opacity: 0.5;
}
#five {
	background-color: green;
	transition: 1s;
	opacity: 0.5;
}

#cc {
	position:relative;
	width: 50vh;
	height: 50vh;
	border-radius: 50%;
	overflow: hidden;
}

#cc:hover #two {
	transform: translate(0px, 75px);
}
#cc:hover #three {
	transform: translate(0px, -75px);
}
#cc:hover #four {
	transform: translate(75px, 0px);
}
#cc:hover #five {
	transform: translate(-75px, 0px);
}

#mb {
	position: absolute;
	font-family: "Oswald", sans-serif;
	letter-spacing: 0.5px;
	bottom: 0px;
	display: flex;
	justify-content: center;
	width: 100vw;
	background-color: #3B3A6D;
	color: white;
}

#mb a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 0px;
}

#mb p {
	padding: 5px;
	margin: 0px;
}

55

Pure CSS Circle Hover Affect

By: pixeldev

<h1 class="heading1">Our Partners</h1>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>

<div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>
      
    </div>
    
  </div>
  
</div>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip reverse">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
      
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
    </div>
    
  </div>
  
</div>

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 versions
*/

/* Base css */
html {
  font-size: 80%;
}
body {
  --body-bg: #eee;
  margin: 0;
  padding: 2rem 2rem 4rem;
  background: var(--body-bg);
  color: #212121;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 100%;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 125%;
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: 150%;
  }
}

/* Heading */
.heading1 {
  font-size: 2rem;
  text-align: center;
}

/* reference */
.reference {
  text-align: center;
}

/* reference link */
.reference-link {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Carousel and animation css starts */
.rc-carousel {
  --box-gap: 1.5rem;
  --tile-size: 8rem;
  width: 100%;
  max-width: calc(
    (var(--tile-size) + var(--box-gap)) * ((var(--tiles) / 2) - 1)
  );
  margin: var(--box-gap) auto;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.rc-carousel::before,
.rc-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 5rem;
  height: 100%;
  background-image: -webkit-gradient(
    linear,
    ,
    from(transparent),
    to(var(--body-bg))
  );
  background-image: -o-linear-gradient(
    var(--direction),
    transparent,
    var(--body-bg)
  );
  background-image: linear-gradient(
    to var(--direction),
    transparent,
    var(--body-bg)
  );
  z-index: inherit;
}
.rc-carousel::before {
  left: 0;
  --direction: left;
}

.rc-carousel::after {
  right: 0;
  --direction: right;
}
.rc-carousel-strip {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-animation: slideX 20s linear infinite;
  animation: slideX 20s linear infinite;
}
.rc-carousel-strip.reverse {
  /* reverse animation */
  animation-direction: reverse;
}
.rc-carousel-strip:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.rc-carousel-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: var(--box-gap);
}

.rc-carousel-item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: var(--tile-size);
  height: var(--tile-size);
}

.rc-carousel-item-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@-webkit-keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

@keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

/* Animation won't work if you preferes reduced motion */
@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
  .rc-carousel::before,
  .rc-carousel::after {
    display: none;
  }
  .rc-carousel-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .rc-carousel-box [aria-hidden="true"] {
    display: none;
  }
  .rc-carousel-strip {
    animation: none;
  }
}
/* reduced motion css ends */
/* Carousel and animation css ends */

/* Footer and credits styles */
.footer {
  position: fixed;
  z-index: 99;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background: #fff;
  font-size: 0.75rem;
  text-align: right;
  font-weight: 600;
}

55

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

55

Heart animation

By: pixeldev

<ul id="accordion">
		<li>
			<h2>Title One</h2>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
			</div>
		</li>
		<li>
			<h2>Title Two</h2>
			<div class="content">
				Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
			</div>
		</li>
		<li>
			<h2>Title Three</h2>
			<div class="content">
				Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
			</div>
		</li>
		<li>
			<h2>Title Four</h2>
			<div class="content">
				Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</li>
	</ul>

</div>

55

Pure CSS Accordion hover

By: pixeldev

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #1c1f2f;
}

.container{
	position: relative;
	-webkit-box-reflect: below 1px linear-gradient(transparent,#0001);
}

.container .loader{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 20px solid transparent;
	border-bottom: 20px solid #06c8f0;
	border-right: 20px solid #06c8f0;
	transform: rotate(45deg);
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate{
	0%{
		transform: rotate(0deg);
	}

50%{
		transform: rotate(90deg);
	}

100%{
		transform: rotate(0deg);
	}
}

.container .loader .ball{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: animateBell 4s ease-in-out infinite;
}

@keyframes animateBell{
	0%{
		transform: rotate(0deg);
	}

50%{
		transform: rotate(180deg);
	}

100%{
		transform: rotate(0deg);
	}
}

.container .loader .ball:before{
	content: '';
	position: absolute;
	bottom: 50%;
	right: 15px;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	transform: translateY(-50%);
}

55

Perpetual Animation

By: pixeldev

<div class="content">
  <div class="is-not-supported" role="alert">
    <p>Scroll-snap is not supported in your current browser. Supported browsers include Firefox version 39.</p>
  </div>
  <h1>Pure CSS Slider</h1>
  <p>This slider uses the css <code>scroll-snap</code> property as well as css styling for the scrollbar. Unfortunately, these two features have opposite browser support, so you will not see all the aspects of this pen in a single browser. You can learn more about the <code>scroll-snap</code>
  <div class="slider">
    <div class="slider-buttons">
      <a href="#slide-1">1</a>
      <a href="#slide-2">2</a>
      <a href="#slide-3">3</a>
      <a href="#slide-4">4</a>
    </div>
    <div class="slides">
      <div class="slide" id="slide-1">
        <p>This is the first slide. Scroll to the right to go to the next slide.</p>
      </div>
      <div class="slide" id="slide-2">
        <p>This is the second slide. Alternatively, change slides using the buttons at the top.</p>
      </div>
      <div class="slide" id="slide-3">
        <p>This is the third slide. You're getting the hang of it.</p>
      </div>
      <div class="slide" id="slide-4">
        <p>This is the last slide. Scroll back to the left if you're into that stuff.</p>
      </div>
    </div>
  </div>
</div>

/** Displays Warning if required property is not supported. **/
@supports (scroll-snap-type: mandatory) or (-webkit-scroll-snap-type: mandatory) {
  .is-not-supported {display: none;}
}

/** Generic Styling & Formatting **/
body * {box-sizing: border-box;}
body {
  margin: 0;
  font-family: helvetica, arial, sans-serif;
}
.content {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

/** Pure CSS Slider **/
.slider {
  position: relative;
  width: 100%;
  height: 350px;
  margin: 2rem auto;
  background: #ddd;
}
.slider .slides {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /** Thank you Sergey! http://blog.gospodarets.com/css-scroll-snap/ **/
    scroll-snap-points-x: repeat(100%);
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
    font-size: 0;
  /** **/
}
.slider .slide {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.slider .slide p {
  position: absolute;
  display: block;
  bottom: 0; left: 0;
  width: 100%;
  font-size: 1rem;
  color: #000;
  background: rgba(0,0,0,0.15);
  padding: 1em;
  margin: 0;
  white-space: normal;
}
.slider #slide-1 {background: #afa;}
.slider #slide-2 {background: #ffa;}
.slider #slide-3 {background: #faa;}
.slider #slide-4 {background: #aff;}

.slider-buttons {
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: auto;
  padding: 0.5rem;
  font-size: 1rem;
  text-align: right;
  z-index: 2;
}
.slider-buttons a {
  width: 2em;
  display: inline-block;
  background: rgba(0,0,0,0.15);
  text-align: center;
  padding: 0.5em 0;
  text-decoration: none;
  color: #000;
}

/** Chrome Scroll Wheel **/

::-webkit-scrollbar {
  height: 34px;
}
::-webkit-scrollbar-track {
  background: #eee;
}
::-webkit-scrollbar-thumb {
  background: #ddd url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/grab.png) center no-repeat;
  background-size: 24px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  position: absolute;
  top: 0;
  display: block;
  height: 34px;
  width: 34px;
  background: #ccc;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/arrow2.png);
  background-size: 100%;
}
::-webkit-scrollbar-button:end:increment {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/arrow.png);
}

/** Alert Box **/
.is-not-supported {
  width: 100%;
  margin: 2rem auto;
  background: #fda;
  padding: 1em;
}
.is-not-supported p {margin: 0;}

@media (max-width: 600px) {
  .content {width: 95%;}
}

55

All

J.A.R.V.I.S Animation

By: pixeldev

Card masonry layout Pure CSS

By: pixeldev

Simple Slide Animation

By: pixeldev

Ferris Wheel Animation

By: pixeldev

Pure CSS Slider – fullPage blog

By: pixeldev

Line Animation

By: pixeldev

Pure CSS Circle Hover Affect

By: pixeldev

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

Heart animation

By: pixeldev

Pure CSS Accordion hover

By: pixeldev

Perpetual Animation

By: pixeldev

Pure CSS Slider using Scroll-Snap

By: pixeldev