All

/* Use a static URL since SCSS variable and `unique_id()` can't be replicated in CSS */
main {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 800px;
  margin: 10px auto;
}

main a {
  color: #a00;
}

main a:hover {
  text-decoration: none;
}

main h1 {
  font-size: 1.75em;
  font-weight: lighter;
  text-align: center;
}

main h3 {
  font-size: 1.2em;
  margin-bottom: 1em;
  color: #333;
  text-align: center;
}

main p {
  text-align: center;
  font-weight: bold;
}

.container {
  width: 400px;
  height: 400px;
  margin: 10px auto;
  border: solid 1px #ccc;
  background: url('https://loremflickr.com/400/400?t=static'); /* Simulated `unique_id()` */
}

.container div {
  filter: sepia(75%);
  height: 100%;
  width: 10%;
  max-width: 99%;
  resize: horizontal;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  animation-delay: 1s;
  animation-duration: 2s;
  animation-name: preview;
  background: url('https://loremflickr.com/400/400?t=static');
}

.container div::after {
  content: ' ';
  position: absolute;
  width: 1em;
  height: 1em;
  background: black;
  bottom: 0;
  right: 0;
  border: solid 1px white;
  border-right: 0;
  border-bottom: 0;
  cursor: col-resize;
}

@keyframes preview {
  0% {
    width: 10%;
  }
  50% {
    width: 90%;
  }
  100% {
    width: 10%;
  }
}

32

Javascriptless Before/After Slider

By: pixeldev

<div class="container">
  <h1>Text</h1>
  <div class="block">
    <div class="p-container">
      <p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block">
    <div class="p-container">
      <p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block">
    <div class="p-container">
      <p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block">
    <div class="p-container">
      <p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block">
    <div class="p-container">
      <p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

</div>

<div class="container">
  <h1>Images</h1>
  <div class="block image">
    <div class="layer"></div>
    <div class="p-container">

<p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block image">
    <div class="layer"></div>
    <div class="p-container">

<p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block image">
    <div class="layer"></div>
    <div class="p-container">

<p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block image">
    <div class="layer"></div>
    <div class="p-container">

<p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block image">
    <div class="layer"></div>
    <div class="p-container">

<p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

</div>

<a href="https://codepen.io/tonkec" class="ua" target="_blank">
  <i class="fa fa-user"></i></a>

html,
 body {
   @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
   padding: 0;
   margin: 0;
   width: 100%;
   height: 100%;
   background-color: #2B2D42;
   font-family: 'Open Sans Condensed', sans-serif;
 }
 
 .container {
   position: relative;
   margin-top: 100px;
   width: 100%;
   text-align: center;
 }
 
 .block {
   width: 10%;
   height: 300px;
   display: inline-block;
   background-color: #E83F6F;
   cursor: pointer;
   position: relative;
   -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -o-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   transition: width .5s ease-in-out, background-color .5s ease-in-out;
   text-align: center;
 }
 
 .block:hover {
   background-color: #2274A5;
   width: 30%;
   -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -o-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   transition: width .5s ease-in-out, background-color .5s ease-in-out;
 }
 
 .block:hover .img-p {
   opacity: 1;
   -webkit-transition: opacity .5s .51s ease-in-out;
   -moz-transition: opacity .5s .51s ease-in-out;
   -ms-transition: opacity .5s .51s ease-in-out;
   -o-transition: opacity .5s .51s ease-in-out;
   transition: opacity .5s .51s ease-in-out;
 }
 
 .block:hover .layer {
   opacity: .5;
   -webkit-transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -ms-transition: opacity .5s ease-in-out;
   -o-transition: opacity .5s ease-in-out;
   transition: opacity .5s ease-in-out;
 }
 
 .img-p {
   position: absolute;
   font-size: 16px;
   opacity: 0;
   color: #FFF;
   text-align: left;
   line-height: 1.6em;
 }
 
 .p-container {
   width: 80%;
   position: relative;
   top: 30%;
   margin-left: 5%;
 }
 
 h1 {
   color: #fff;
 }
 
 .image {
   background-image: url(http://i67.tinypic.com/34ywe8m.jpg);
   -webkit-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
 }
 
 .image.fixed {
   background-attachment: fixed;
   background-position: center center;
   -webkit-background-size: 100% auto;
   -o-background-size: 100% auto;
   background-size: 100% auto;
 }
 
 .layer {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   background-color: #000;
   width: 100%;
   height: 100%;
   opacity: 0;
 }

@media (max-width: 768px) {
      .container {
        width: 90%;
        margin: 0 auto;
      }
      .block {
        width: 100%;
        height: 200px;
         -webkit-transition: height .5s ease-in-out;
           -moz-transition: height .5s ease-in-out;
            -ms-transition: height .5s ease-in-out;
             -o-transition: height .5s ease-in-out;
                transition: height .5s ease-in-out;
      }

.block:hover {
        width: 100%;
        height: 400px;
        -webkit-transition: height .5s ease-in-out;
           -moz-transition: height .5s ease-in-out;
            -ms-transition: height .5s ease-in-out;
             -o-transition: height .5s ease-in-out;
                transition: height .5s ease-in-out;
      }
    }

@media (min-width: 768px) {
      .block {
        width: 15%;
      }
    }

@media (min-width: 992px) {
      .block {
        width: 10%;
      }
    }

.ua {
   position: fixed;
   right: 20px;
   top: 20px;
   color: #fff;
   font-size: 2em;
 }
 
 .fa {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
 }
 
 .ua:hover .fa {
   color: #17BEBB;
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
 }

32

Pure CSS bread-loaf carousel

By: pixeldev

.ms-header {
  display: flex;
  align-items: center;
  justify-content: center; /* Fixed typo: 'jsutify-content' */
  font-family: sans-serif;

width: 100vw;
  height: 100vh;

background: linear-gradient(
    to right bottom,
    rgb(157, 215, 213),
    rgb(255, 135, 120) /* approximation of lighten(rgb(253, 115, 100), 10%) */
  );
}

.ms-header__title {
  flex: 1 1 100%;
  width: 100%;

text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

.ms-slider {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: middle;

/* CSS3 does not support `mask-mode` and `mask-type` in most browsers */
  -webkit-mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
  mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
}

.ms-slider__words {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;

animation-name: wordSlider;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: 7s;
}

.ms-slider__word {
  display: block;
  line-height: 1.3em;
  text-align: left;
}

@keyframes wordSlider {
  0%, 19% {
    transform: translateY(0%);
  }

25%, 44% {
    transform: translateY(-25%);
  }

50%, 69% {
    transform: translateY(-50%);
  }

75%, 94% {
    transform: translateY(-75%);
  }

100% {
    transform: translateY(-75%);
  }
}

32

CSS-only word slider

By: pixeldev

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing: border-box; 
/* adds animation for all transitions */ 
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out; 
margin: 0; 
padding: 0; 
-webkit-text-size-adjust: none; 
}

/* Makes sure that everything is 100% height */

html,body { 
height: 100%; 
overflow: hidden; 
}

/* gets the actual input out of the way; 
we're going to style the label instead */

#drawer-toggle { 
position: absolute; 
opacity: 0; 
}

#drawer-toggle-label { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
left: 0px; 
height:50px; 
width: 50px; 
display: block; 
position: fixed; 
 background: rgba(255,255,255,.0);
z-index: 1; 
}

/* adds our "hamburger" menu icon */

#drawer-toggle-label:before { 
content: ''; 
display: block; 
position: absolute; 
height: 2px; 
width: 24px; 
background: #8d8d8d; 
left: 13px; 
top: 18px; 
box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d; 
}

header { 
width: 100%; 
position: fixed; 
left: 0px; 
background: #efefef; 
padding: 10px 10px 10px 50px; 
font-size: 30px; 
line-height: 30px; 
z-index: 0; 
}

/* drawer menu pane - note the 0px width */

#drawer { 
position: fixed; 
top: 0; 
left:-300px; 
height: 100%; 
width: 300px; 
background: #2f2f2f; 
overflow-x: hidden; 
overflow-y: scroll; 
padding: 20px; 
-webkit-overflow-scrolling: touch; 
}

/* actual page content pane */

#page-content { 
margin-left: 0px; 
margin-top: 50px; 
width: 100%; 
height: calc(100% - 50px); 
overflow-x:hidden; 
overflow-y:scroll; 
-webkit-overflow-scrolling: touch; 
padding: 20px; 
}

/* checked styles (menu open state) */

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: calc(100% - 300px); 
background: rgba(255,255,255,.8); 
}

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: 300px; 
}

#drawer-toggle:checked ~ #drawer { 
left: 0px; 
}

#drawer-toggle:checked ~ #page-content { 
margin-left: 300px; 
}

/* Menu item styles */

#drawer ul { 
list-style-type:none; 
}

#drawer ul a { 
display:block; 
padding:10px; 
color:#c7c7c7; 
text-decoration:none; 
}

#drawer ul a:hover { 
color:white; 
}

/* Responsive MQ */

@media all and (max-width:350px) {

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: 50px; 
}

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: calc(100% - 50px); 
}

#drawer-toggle:checked ~ #drawer { 
width: calc(100% - 50px); 
padding: 20px; 
}

#drawer-toggle:checked ~ #page-content { 
margin-left: calc(100% - 50px); 
}

}

32

Responsive Pure CSS Menu Drawer

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}

31

Pure CSS Animated Navigation Menu

By: pixeldev

<div class="cloudcontain1">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  <div class="cloudcontain2">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  <div class="cloudcontain3">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  <div class="cloudcontain4">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  
  
  <div class="blade1"></div>
  <div class="blade2"></div>
  <div class="blade3"></div>
  <div class="blade4"></div>
  <div class="blade5"></div>
  <div class="blade6"></div>
  <div class="blade7"></div>
  <div class="blade8"></div>
  <div class="blade9"></div>
  <div class="blade10"></div>
  <div class="blade11"></div>
  <div class="blade12"></div>
  <div class="blade13"></div>
  <div class="blade14"></div>
  <div class="blade15"></div>
  <div class="blade16"></div>
  <div class="blade17"></div>
  <div class="blade18"></div>
  <div class="blade19"></div>
  <div class="blade20"></div>
  <div class="blade21"></div>
  <div class="blade22"></div>
  <div class="blade23"></div>
  <div class="blade24"></div>
  <div class="blade25"></div>
  <div class="blade26"></div>
  <div class="blade27"></div>
  <div class="blade28"></div>
  <div class="blade29"></div>
  <div class="blade30"></div>
  <div class="blade31"></div>
  <div class="blade32"></div>
  <div class="blade33"></div>
  <div class="blade34"></div>
  <div class="blade35"></div>
  <div class="blade36"></div>
  <div class="blade37"></div>
  <div class="blade38"></div>
  <div class="blade39"></div>
  <div class="blade40"></div>
  <div class="blade41"></div>
  <div class="blade42"></div>
  <div class="blade43"></div>
  <div class="blade44"></div>
  <div class="blade45"></div>
  
  <div class="blade1b"></div>
  <div class="blade2b"></div>
  <div class="blade3b"></div>
  <div class="blade4b"></div>
  <div class="blade5b"></div>
  <div class="blade6b"></div>
  <div class="blade7b"></div>
  <div class="blade8b"></div>
  <div class="blade9b"></div>
  <div class="blade10b"></div>
  <div class="blade11b"></div>
  <div class="blade12b"></div>
  <div class="blade13b"></div>
  <div class="blade14b"></div>
  <div class="blade15b"></div>
  <div class="blade16b"></div>
  <div class="blade17b"></div>
  <div class="blade18b"></div>
  <div class="blade19b"></div>
  <div class="blade20b"></div>
  <div class="blade21b"></div>
  <div class="blade22b"></div>
  <div class="blade23b"></div>
  <div class="blade24b"></div>
  <div class="blade25b"></div>
  <div class="blade26b"></div>
  <div class="blade27b"></div>
  <div class="blade28b"></div>
  <div class="blade29b"></div>
  <div class="blade30b"></div>
  <div class="blade31b"></div>
  <div class="blade32b"></div>
  <div class="blade33b"></div>
  <div class="blade34b"></div>
  <div class="blade35b"></div>
  <div class="blade36b"></div>
  <div class="blade37b"></div>
  <div class="blade38b"></div>
  <div class="blade39b"></div>
  <div class="blade40b"></div>
  <div class="blade41b"></div>
  <div class="blade42b"></div>
  <div class="blade43b"></div>
  <div class="blade44b"></div>
  <div class="blade45b"></div>
  
  <div class="sand"></div>

body {
  background: -webkit-linear-gradient(45deg, rgba(242,249,255,1) 0%,rgba(64,150,238,1) 100%); 
  overflow: hidden;
}

.sand {
  background: #FFDEAA;
  width: 100%;
  height: 10px;
  bottom: 0;
  position: absolute;
  z-index: 5;
}

.cloudcontain1 {
  top: 250px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove1 55s infinite; 
  animation: cloudmove1 55s infinite;
  position: absolute;
  opacity: .7;
}

@-webkit-keyframes cloudmove1 {
    0%   {left: 0;}
    100% {left: 1200px;}
}

@keyframes cloudmove1 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloudcontain2 {
  top: 75px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove2 40s infinite; 
  animation: cloudmove2 40s infinite;
  position: absolute;
  -webkit-animation-delay: -16s;
  animation-delay: -16s;
  opacity: .3;
}

@-webkit-keyframes cloudmove2 {
    0%   {left: 0;}
    100% {left: 100%;}
}

@keyframes cloudmove2 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloudcontain3 {
  top: 320px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove3 47s infinite; 
  animation: cloudmove3 47s infinite;
  position: absolute;
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
  opacity: .6;
}

@-webkit-keyframes cloudmove3 {
    0%   {left: 0;}
    100% {left: 100%;}
}

@keyframes cloudmove3 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloudcontain4 {
  top: 400px;
  width: 200px;
  height: 150px;
  -webkit-animation: cloudmove4 41s infinite; 
  animation: cloudmove4 41s infinite;
  position: absolute;
  -webkit-animation-delay: -13s;
  animation-delay: -13s;
  opacity: .6;
}

@-webkit-keyframes cloudmove4 {
    0%   {left: 0;}
    100% {left: 100%;}
}

@keyframes cloudmove4 {
    0%   {left: 0;}
    100% {left: 100%;}
}

.cloud1 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: white;
    position :absolute;
    z-index: 1;
    margin: 15px;
}

.cloud2 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: white;
    position :absolute;
    z-index: 2;
    margin: 45px;
}

.cloud3 {
    width: 75px;
    height: 75px;
    border-radius: 45px;
    background: white;
    position :absolute;
    z-index: 3;
    margin: 0px;
    top: 50px;
}

/*Front Row*/

.blade1, .blade2, .blade3, .blade4, .blade5, 
.blade6, .blade7, .blade8, .blade9, .blade10, 
.blade11, .blade12, .blade13, .blade14, .blade15, 
.blade16, .blade17, .blade18, .blade19, .blade20, 
.blade21, .blade22, .blade23, .blade24, .blade25, 
.blade26, .blade27, .blade28, .blade29, .blade30, 
.blade31, .blade32, .blade33, .blade34, .blade35,
.blade36, .blade37, .blade38, .blade39, .blade40, 
.blade41, .blade42, .blade43, .blade44, .blade45{
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 55px solid #156A32;
    position: absolute;
    -webkit-animation: mymove 5s infinite;  
    animation: mymove 5s infinite;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    z-index: 7;
    bottom: 0px;
}

.blade1 {left: 0px;}
.blade2 {left: 25px;}
.blade3 {left: 50px;}
.blade4 {left: 75px;}
.blade5 {left: 100px;}
.blade6 {left: 125px;}
.blade7 {left: 150px;}
.blade8 {left: 175px;}
.blade9 {left: 200px;}
.blade10 {left: 225px;}
.blade11 {left: 250px;}
.blade12 {left: 275px;}
.blade13 {left: 300px;}
.blade14 {left: 325px;}
.blade15 {left: 350px;}
.blade16 {left: 375px;}
.blade17 {left: 400px;}
.blade18 {left: 425px;}
.blade19 {left: 450px;}
.blade20 {left: 475px;}
.blade21 {left: 500px;}
.blade22 {left: 525px;}
.blade23 {left: 550px;}
.blade24 {left: 575px;}
.blade25 {left: 600px;}
.blade26 {left: 625px;}
.blade27 {left: 650px;}
.blade28 {left: 675px;}
.blade29 {left: 700px;}
.blade30 {left: 725px;}
.blade31 {left: 750px;}
.blade32 {left: 775px;}
.blade33 {left: 800px;}
.blade34 {left: 825px;}
.blade35 {left: 850px;}
.blade36 {left: 875px;}
.blade37 {left: 900px;}
.blade38 {left: 925px;}
.blade39 {left: 950px;}
.blade40 {left: 975px;}
.blade41 {left: 1000px;}
.blade42 {left: 1025px;}
.blade43 {left: 1050px;}
.blade44 {left: 1075px;}
.blade45 {left: 1100px;}

@-webkit-keyframes mymove {
    0%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #156A32; }
    25% {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #156A32; }
    50% {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #156A32; }
    75%   {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #156A32; }
    100%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #156A32; }
}

/*Back Row*/

.blade1b, .blade2b, .blade3b, .blade4b, .blade5b,
.blade6b, .blade7b, .blade8b, .blade9b, .blade10b,
.blade11b, .blade12b, .blade13b, .blade14b, .blade15b,
.blade16b, .blade17b, .blade18b, .blade19b, .blade20b,
.blade21b, .blade22b, .blade23b, .blade24b, .blade25b,
.blade26b, .blade27b, .blade28b, .blade29b, .blade30b,
.blade31b, .blade32b, .blade33b, .blade34b, .blade35b,
.blade36b, .blade37b, .blade38b, .blade39b, .blade40b, 
.blade41b, .blade42b, .blade43b, .blade44b, .blade45b {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 55px solid #1E4018;
    position: absolute;
    -webkit-animation: mymoveb 5s infinite;  
    animation: mymoveb 5s infinite;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    z-index: 5;
    bottom: 0px;
}

.blade1b {left: 15px;}
.blade2b {left: 35px;}
.blade3b {left: 65px;}
.blade4b {left: 85px;}
.blade5b {left: 115px;}
.blade6b {left: 135px;}
.blade7b {left: 165px;}
.blade8b {left: 185px;}
.blade9b {left: 215px;}
.blade10b {left: 235px;}
.blade11b {left: 265px;}
.blade12b {left: 285px;}
.blade13b {left: 315px;}
.blade14b {left: 335px;}
.blade15b {left: 365px;}
.blade16b {left: 385px;}
.blade17b {left: 415px;}
.blade18b {left: 435px;}
.blade19b {left: 465px;}
.blade20b {left: 485px;}
.blade21b {left: 515px;}
.blade22b {left: 535px;}
.blade23b {left: 565px;}
.blade24b {left: 585px;}
.blade25b {left: 615px;}
.blade26b {left: 635px;}
.blade27b {left: 665px;}
.blade28b {left: 685px;}
.blade29b {left: 715px;}
.blade30b {left: 735px;}
.blade31b {left: 765px;}
.blade32b {left: 785px;}
.blade33b {left: 815px;}
.blade34b {left: 835px;}
.blade35b {left: 865px;}
.blade36b {left: 885px;}
.blade37b {left: 915px;}
.blade38b {left: 935px;}
.blade39b {left: 965px;}
.blade40b {left: 985px;}
.blade41b {left: 1015px;}
.blade42b {left: 1035px;}
.blade43b {left: 1065px;}
.blade44b {left: 1085px;}
.blade45b {left: 1115px;}

@-webkit-keyframes mymoveb {
    0%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    25% {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    50% {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    75%   {
      border-left: 25px solid transparent; 
      border-right: 10px solid transparent; 
      border-bottom: 55px solid #1E4018; }
    100%   {
      border-left: 10px solid transparent; 
      border-right: 25px solid transparent; 
      border-bottom: 55px solid #1E4018; }
}

31

Wavy Grass

By: pixeldev

<div id="wrapper">

<div id="SVGWrap">
      <div id="svgA"></div>
      <div id="svgB"></div>
      <div id="svgC"></div>
    </div>

<a id="logo" href="#wrapper">
      <h1>BeeSoft</h1>
    </a>

<div id="intro">

<h1 id="s1">
        <span>
          Making digital
          brand, product
          elegent.
        </span>
      </h1>

<h1 id="s2">
        <span>
          Lorem ipsum dolor sit amet te tur adi.
        </span>
      </h1>

</div>

<nav>
      <span>
        <a href="#s1"></a>
        <a href="#s2"></a>
      </span>
    </nav>

<footer>
      <span id="insta">
        <a href=""></a>
      </span>

<span id="Behance">
        <a href=""></a>
      </span>

<h1 id="copyright">© 2021 BeeSoft</h1>
      <a id="codeby" target="_blank" href="https://icodeayush.github.io/">Code By <span>iCodeAyush</span></a>

</footer>

<div id="Lang">
      <span>
        <a href="#Ru">Ru</a>
        <a href="#En">En</a>
      </span>
    </div>

</div>

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
:root {
  /*-------------Colors------------- */
  --ColorDarkA: rgb(0, 0, 0);
  --ColorWhiteA: rgb(255, 255, 255);
  /*-------------FontSize -- Perfect Fifth (1.500) Base Size 22px------------- */
  --FontH1: 233.25px;
  --FontH2: 144.16px;
  --FontH3: 89.10px;
  --FontH4: 55.07px;
  --FontH5: 34.03px;
  --FontParagraph: 21.03px;
  --FontSubtitle: 13px;
  /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
  --GoldenRatio1: 1920px;
  --GoldenRatio2: 1186.65px;
  --GoldenRatio3: 733.41px;
  --GoldenRatio4: 453.28px;
  --GoldenRatio5: 280.15px;
  --GoldenRatio6: 173.15px;
  --GoldenRatio7: 107.01px;
  --GoldenRatio8: 66.14px;
  --GoldenRatio9: 40.88px;
  --GoldenRatio10: 25.27px;
  --GoldenRatio11: 15.62px;
  --GoldenRatio12: 9.65px;
  --GoldenRatio13: 5.96px;
  /*-------------Animation Timing Function------------- */
  --EaseInPower1: cubic-bezier(0.165, 0.84, 0.44, 1);
  --EaseInPower2: cubic-bezier(0.215, 0.610, 0.355, 1);
  --EaseInPower3: cubic-bezier(0.77, 0, 0.175, 1);
}

::-webkit-scrollbar {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  color: var(--ColorWhiteA);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lexend', sans-serif;
  background: var(--ColorDarkA);
  height: 100vh;
}

#wrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#wrapper #SVGWrap {
  width: 100vw;
  height: 100vh;
  position: absolute;
  overflow: hidden;
}

#wrapper #SVGWrap div {
  position: absolute;
}

#wrapper #SVGWrap #svgA {
  background: url(https://icodeayush.github.io/BeeSoft/svg/s21.svg) no-repeat center;
  top: 55vw;
  left: -40vw;
  height: 60vw;
  width: 60vw;
}

#wrapper #SVGWrap #svgB {
  background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  width: 10vw;
  height: 10vw;
  left: 35vw;
  top: 57vw;
}

#wrapper #SVGWrap #svgC {
  background: url(https://icodeayush.github.io/BeeSoft/svg/so2.svg) no-repeat center;
  width: 70vw;
  height: 60vw;
  top: 52vw;
  right: -30vw;
}

#wrapper #logo {
  position: absolute;
  z-index: 2;
  width: fit-content;
  top: var(--GoldenRatio7);
  right: var(--GoldenRatio7);
  text-decoration: none;
  overflow: hidden;
}

#wrapper #logo h1 {
  font-size: var(--FontH5);
  font-weight: 600;
  color: var(--ColorWhiteA);
  opacity: 0;
}

#wrapper #intro {
  position: absolute;
  width: var(--GoldenRatio1);
  height: 100vh;
  display: flex;
  overflow: scroll;
  scroll-behavior: smooth;
}

#wrapper #intro h1 {
  display: flex;
  align-items: center;
  width: var(--GoldenRatio1);
  height: 100vh;
  flex-shrink: 0;
  cursor: default;
}

#wrapper #intro h1 span {
  font-size: var(--FontH3);
  font-weight: 600;
  width: var(--GoldenRatio3);
  color: var(--ColorWhiteA);
  margin-left: var(--GoldenRatio7);
  opacity: 0;
}

#wrapper nav {
  position: absolute;
  right: var(--GoldenRatio7);
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#wrapper nav span {
  display: flex;
  justify-content: space-between;
  display: block;
}

#wrapper nav span a:nth-child(1) {
  display: block;
  background: url(https://icodeayush.github.io/BeeSoft/svg/ChevronLeft.svg) no-repeat right;
  background-size: contain;
  height: var(--FontH5);
  width: var(--FontH5);
  margin-bottom: var(--GoldenRatio11);
  opacity: 0;
}

#wrapper nav span a:nth-child(2) {
  display: block;
  background: url(https://icodeayush.github.io/BeeSoft/svg/ChevronRight.svg) no-repeat right;
  background-size: contain;
  height: var(--FontH5);
  width: var(--FontH5);
  opacity: 0;
}

#wrapper footer {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: var(--GoldenRatio7);
  width: var(--GoldenRatio1);
  height: var(--FontH4);
}

#wrapper footer #insta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  margin-left: var(--GoldenRatio7);
  border: 2px solid rgb(255, 255, 255);
  opacity: 0;
}

#wrapper footer #insta a {
  display: block;
  width: var(--FontParagraph);
  height: var(--FontParagraph);
  background: url(https://icodeayush.github.io/BeeSoft/svg/Instagram.svg) no-repeat center;
  background-size: contain;
}

#wrapper footer #Behance {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  margin-left: var(--GoldenRatio11);
  border: 2px solid rgb(255, 255, 255);
  opacity: 0;
}

#wrapper footer #Behance a {
  display: block;
  width: var(--FontH5);
  height: var(--FontParagraph);
  background: url(https://icodeayush.github.io/BeeSoft/svg/Behance.svg) no-repeat center;
  background-size: cover;
}

#wrapper footer #copyright, #wrapper footer #codeby {
  font-size: var(--FontParagraph);
  font-weight: 500;
  color: var(--ColorWhiteA);
  margin-left: var(--GoldenRatio9);
  opacity: 0;
}

#wrapper footer #copyright {
  cursor: default;
}

#wrapper footer #codeby {
  text-decoration: none;
  margin-left: var(--GoldenRatio11);
}

#wrapper footer #codeby span {
  font-weight: 600;
  opacity: 0;
}

#wrapper #Lang {
  position: absolute;
  bottom: var(--GoldenRatio7);
  right: var(--GoldenRatio7);
  height: var(--FontH4);
  display: flex;
  align-items: center;
}

#wrapper #Lang span {
  display: flex;
}

#wrapper #Lang span a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FontH4);
  height: var(--FontH4);
  border-radius: 100%;
  border: 2px solid rgb(255, 255, 255);
  margin-left: var(--GoldenRatio11);
  font-size: var(--FontParagraph);
  font-weight: 500;
  color: var(--ColorWhiteA);
  text-decoration: none;
  opacity: 0;
}

#wrapper #Lang span a:nth-child(2) {
  background: var(--ColorWhiteA);
  color: var(--ColorDarkA);
  opacity: 0;
}

/*-------------Animation Timeline------------- */

body {
  animation: BGAni 4s 0s ease-in-out infinite alternate-reverse;
}

#wrapper {
  animation: BGFadeAni 1.5s 6.1s ease forwards;
  background: black;
}

#wrapper #SVGWrap {
  animation: SVGFadeAni 3.3s 6.3s ease forwards;
  opacity: 0;
}

#wrapper #SVGWrap #svgA {
  animation: svgA 5.7s 4.9s ease-in-out infinite alternate-reverse;
}

#wrapper #SVGWrap #svgB {
  animation: svgB 5.2s 6.1s ease-in-out infinite alternate-reverse;
}

#wrapper #SVGWrap #svgC {
  animation: svgC 5.2s 6.3s ease-in-out infinite alternate-reverse;
}

#wrapper #intro h1 span {
  animation: LoadAniY 3s 1s var(--EaseInPower3) forwards;
}

#wrapper #logo h1 {
  animation: LoadAniY 2.2s 2.3s var(--EaseInPower2) forwards;
}

#wrapper footer #insta {
  animation: LoadAniOpacityY 1.5s 3.4s var(--EaseInPower2) forwards;
}

#wrapper footer #Behance {
  animation: LoadAniOpacityY 1.5s 3.6s var(--EaseInPower2) forwards;
}

#wrapper footer #copyright {
  animation: LoadAniOpacityY 1.5s 3.8s var(--EaseInPower2) forwards;
}

#wrapper footer #codeby {
  animation: LoadAniOpacityY 1.5s 4.2s var(--EaseInPower2) forwards;
}

#wrapper footer #codeby span {
  animation: LoadAniOpacityY 1.5s 4.4s var(--EaseInPower2) forwards;
}

#wrapper #Lang span a {
  animation: LoadAniOpacityXR 1.5s 4.8s var(--EaseInPower3) forwards;
}

#wrapper #Lang span a:nth-child(2) {
  animation: LoadAniOpacityXL 1.5s 5s var(--EaseInPower3) forwards;
}

#wrapper nav span a:nth-child(1) {
  animation: LoadAniXL 1.5s 6s var(--EaseInPower1) forwards;
}

#wrapper nav span a:nth-child(2) {
  animation: LoadAniXR 1.5s 6.2s var(--EaseInPower1) forwards;
}

/*-------------Animation Keyframes------------- */

@keyframes BGFadeAni {
  from {
    background: black;
  }
  to {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes SVGFadeAni {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes BGAni {
  from {
    background-image: linear-gradient(to top left, #FFC796 0%, #FF6B95 100%);
  }
  to {
    background-image: linear-gradient(to top left, #b721ff 0%, #21d4fd 100%);
  }
}

@keyframes svgA {
  0% {
    width: 20vw;
    height: 20vw;
    left: 10vw;
    top: 25vh;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s21.svg) no-repeat center;
  }
  20% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/s11.svg) no-repeat center;
  }
  100% {
    top: 55vw;
    left: -40vw;
    height: 60vw;
    width: 60vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s11.svg) no-repeat center;
  }
}

@keyframes svgB {
  0% {
    right: 6vw;
    top: 6vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  }
  20% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/s12.svg) no-repeat center;
  }
  100% {
    height: 30vw;
    width: 30vw;
    top: 56vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/s22.svg) no-repeat center;
  }
}

@keyframes svgC {
  0% {
    width: 40vw;
    height: 30vw;
    right: 6vw;
    top: 6vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
  40% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/so2.svg) no-repeat center;
  }
  80% {
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
  100% {
    width: 70vw;
    height: 60vw;
    top: 52vw;
    right: -30vw;
    background: url(https://icodeayush.github.io/BeeSoft/svg/so1.svg) no-repeat center;
  }
}

@keyframes LoadAniY {
  from {
    opacity: 0;
    transform: translateY(3.1vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniXL {
  from {
    opacity: 0;
    transform: translateX(1.5vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniXR {
  from {
    opacity: 0;
    transform: translateX(-1.5vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityY {
  from {
    opacity: 0;
    transform: translateY(0.7vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityXL {
  from {
    opacity: 0;
    transform: translateX(0.3vw);
  }
  to {
    opacity: 1;
  }
}

@keyframes LoadAniOpacityXR {
  from {
    opacity: 0;
    transform: translateX(-0.3vw);
  }
  to {
    opacity: 1;
  }
}

/*-------------@media (max-width: 1920px)------------- */

@media (max-width: 1920px) {
  :root {
    --FontH1: 12.148vw;
    --FontH2: 7.508vw;
    --FontH3: 4.641vw;
    --FontH4: 2.868vw;
    --FontH5: 1.772vw;
    --FontParagraph: 1.095vw;
    --FontSubtitle: 0.677vw;
    /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
    --GoldenRatio1: 100vw;
    --GoldenRatio2: 61.805vw;
    --GoldenRatio3: 38.198vw;
    --GoldenRatio4: 23.608vw;
    --GoldenRatio5: 14.591vw;
    --GoldenRatio6: 9.018vw;
    --GoldenRatio7: 5.573vw;
    --GoldenRatio8: 3.445vw;
    --GoldenRatio9: 2.129vw;
    --GoldenRatio10: 1.316vw;
    --GoldenRatio11: 0.814vw;
    --GoldenRatio12: 0.503vw;
    --GoldenRatio13: 0.310vw;
  }
}

31

BeeSoft (Pure CSS Loading Animation)

By: pixeldev

.carousel-wrapper {
  width: 520px; /* 400px * 1.3 */
  height: 350px; /* 250px * 1.4 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
  border-radius: 20px;
  margin: 100px auto 20px;
}

.carousel-container {
  width: 400px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  display: flex;
  width: 1200px; /* 400px * 3 */
  animation: sliding 12s infinite;
}

.carousel div {
  width: 400px;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel .image-one {
  background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-two {
  background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-three {
  background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

@keyframes sliding {
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-400px);
  }
  65% {
    transform: translateX(-400px);
  }
  70% {
    transform: translateX(-800px);
  }
  98% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Responsive: max-width 768px */
@media screen and (max-width: 768px) {
  .carousel-wrapper {
    width: 312px; /* 240px * 1.3 */
    height: 210px; /* 150px * 1.4 */
  }

.carousel-container {
    width: 240px;
    height: 150px;
  }

.carousel {
    width: 720px; /* 240px * 3 */
  }

.carousel div {
    width: 240px;
    height: 150px;
  }

@keyframes sliding {
    30% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-240px);
    }
    65% {
      transform: translateX(-240px);
    }
    70% {
      transform: translateX(-480px);
    }
    98% {
      transform: translateX(-480px);
    }
    100% {
      transform: translateX(0);
    }
  }
}

31

Responsive Sliding Carousel (CSS Animation Journey Collection)

By: pixeldev

<main>
  <h1>CSS only accordion, nearly accessible</h1>
    
  <label for="tota11y-open-close">Expand all sections?</label>
    
  <ul class="tota11y-accordion" aria-label="FAQs accordion">
      <li>
         <a href="#acc1" id="#accLink1">Short Item, No Scroll</a>
         <section class="content" id="acc1" aria-labelledby="accLink1">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc2" id="#accLink2">Long Item, Has Scroll, No Focusable Content</a>
          <section class="content" id="acc2" aria-labelledby="accLink2">
              <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
      <li>
          <a href="#acc3" id="#accLink3">Long Item, Has Scroll, Focusable Content</a>
          <section class="content" id="acc3" aria-labelledby="accLink3">
              <ul>
                  <li>Item <a href="#">Focusable link</a></li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
              </ul>
          </section>
      </li>
  </ul>
</main>

:root {
    --ta11y-open-duration: 0.5s;
}

body {
    font-size: 18px;
    background: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    color: white;
    padding: 30px;
}

a {
    color: white;
}

.tota11y-accordion > li > a {
    padding: 2rem 1.5rem;
    display: block;
    color: white;
    position: relative;
    cursor: pointer;
    outline: transparent;
    text-decoration: none;
}

.tota11y-accordion > li {
    max-width: 800px;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 1rem;
    background: #151618;
    box-shadow: 0px 0px 0px 0px #333;
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: box-shadow 0.3s 0s ease,
        grid-template-rows var(--ta11y-open-duration);
}
.tota11y-accordion > li:focus-within {
    box-shadow: 0 0 0 4px #000, 0 0 0 6px #2cdce6;
}
.tota11y-accordion > li:has(.content:target) > a:before,
.tota11y-accordion > li:has(.content:focus-within) > a:before {
    transform: rotate(180deg);
}

.tota11y-accordion > li > a:before {
    content: "";
    opacity: 0.6;
    background-image: url("https://assets.codepen.io/7212043/rounded-arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 1.8rem;
    right: 1.5rem;
    transform: rotate(0deg);
    transform-origin: 1rem 50%;
    transition: 0.25s transform ease;
}

.tota11y-accordion > li .content {
    border-top: none;
    margin: 0 1rem;
    padding: 0 0.5rem;
    border-top: none;
    color: #a9abb3;
    visibility: hidden;
    display: grid;
    overflow: hidden;
    transition: margin var(--ta11y-open-duration) linear,
        padding var(--ta11y-open-duration) linear;
    max-height: 200px;
}
.tota11y-accordion > li .content::-webkit-scrollbar {
    width: 14px;
}
.tota11y-accordion > li .content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.tota11y-accordion > li .content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
}
@keyframes show-scroll {
    0% {
        overflow-y: hidden;
    }
    0.2% {
        overflow-y: auto;
    }
    to {
        overflow-y: auto;
    }
}
.tota11y-accordion > li .content:focus {
    outline: none;
}
.tota11y-accordion > li:has(.content:target),
.tota11y-accordion > li:has(.content:focus-within) {
    grid-template-rows: min-content 1fr;
}
.tota11y-accordion > li:has(.content:target) .content,
.tota11y-accordion > li:has(.content:focus-within) .content {
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll; 
    overflow-y: auto;
    
}

@media (prefers-reduced-motion) {
    :root {
        --ta11y-open-duration: 0s;
    }
    .tota11y-accordion > li:has(.content:target) .content,
    .tota11y-accordion > li:has(.content:focus-within) .content {
        overflow-y: auto;
    }
    .tota11y-accordion > li > a:before {
        transition: none;   
    }
}

label{
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

#tota11y-open-close{
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
    accent-color: #555;
}

#tota11y-open-close:checked ~ ul>li{
    grid-template-rows: min-content 1fr;
}

#tota11y-open-close:checked ~ ul>li>.content{
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll;
}

/* we can open all of the accordion items easily with the @media print media query if we wish */
@media print {
    .tota11y-accordion > li {
        grid-template-rows: min-content 1fr;
    }
    .tota11y-accordion > li .content {
        visibility: visible;
        margin: 0.5rem 1rem 2rem 1rem;
        padding: 0.5rem;
        max-height: none;
    }
    /* ideally we would also remove all of the bg-color etc. to save ink, but that is specific to this colour scheme and so not relevant in the demo */
}

31

Animated Pure CSS accordion

By: pixeldev

* {
  box-sizing: border-box;
}
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #ffcb05;
}
.pokeball {
  display: block;
  width: 192px;
  height: 192px;
  background: radial-gradient(
      white 16px,
      black 17px 18px,
      white 19px 24px,
      black 25px 32px,
      transparent 33px
    ),
    linear-gradient(to bottom, red 0 80px, black 81px 96px, white 97px 100%);
  border-radius: 50%;
  border: 8px solid black;
  box-shadow: inset -16px -8px 0 0 rgba(0, 0, 0, 0.2);
  animation: fall 0.5s ease-in-out 1s,
    shake 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1.5s 3,
    catch 0.5s ease-out 5.25s forwards;
}
/* Animation */
@keyframes shake {
  0% {
    transform: translateX(0) rotate(0);
  }
  20% {
    transform: translateX(-10px) rotate(-20deg);
  }
  30% {
    transform: translateX(10px) rotate(20deg);
  }
  50% {
    transform: translateX(-10px) rotate(-10deg);
  }
  60% {
    transform: translateX(10px) rotate(10deg);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}
@keyframes fall {
  0% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes catch {
  to {
    filter: saturate(0.8) brightness(0.8);
  }
}

31

Pokeball Caught Animation

By: Nethan Pogi

30

Border Style

By: Jusar Pogi

30

Pure CSS Table Highlight (vertical & horizontal)

By: pixeldev

Previous 1 … 12 13 14 15 16 … 24 Next