The Power of Pure CSS - No JavaScript Needed

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

article:nth-of-type(1){
  animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
  animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
  animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
  animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
  animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
  animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
  animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

19

Pure CSS Image Slider

By: pixeldev

<div class="container">
	<section>
		<details>
			<summary>Accordion menu 1</summary>
			<div class="discuss">
				<h1>Accordion details 1</h1>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
			</div>
		</details>

<details>
			<summary>Accordion menu 2</summary>
			<div class="discuss">
				<h1>Accordion details 2</h1>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
			</div>
		</details>

<details>
			<summary>Accordion menu 3</summary>
			<div class="discuss">
				<h1>Accordion details 3</h1>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
			</div>
		</details>

<details>
			<summary>Accordion menu 4</summary>
			<div class="discuss">
				<h1>Accordion details 4</h1>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
			</div>
		</details>

<details>
			<summary>Accordion menu 5</summary>
			<div class="discuss">
				<h1>Accordion details 5</h1>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
			</div>
		</details>
	</section>
</div>

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

.container {
	background: #00cccc;
	padding-bottom: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.container section {
	width: 700px;
	margin: 5px;
	box-shadow: 0 5px 10px #3334;
}

.container section details summary {
	padding: 15px;
	background: #008b8b;
	color: #fff;
	border: 1px solid #444;
	position: relative;
	list-style: none;
	outline: none;
	cursor: pointer;
	font-size: 20px;
}

.container section details .discuss {
	padding: 5px 15px 10px 15px;
	color: #444;
	background: #e6ffff;
}

.container section details summary::after {
	content: "+";
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 30px;
	color: #fff;
	transition: .2s linear;
}

.container section details[open] summary::after {
	transform: rotate(135deg);
}

.container section details[open] summary {
	background: #006666;
}

.container section details[open] summary ~ * {
  animation: sweep .7s ease-in-out;
}

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

19

Animated accordion – pure html css

By: pixeldev

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #D97A2B 20%, #C44A3A 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

18

Wave Animation Using .png

By: Nethan Pogi

.container {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid rgb(118, 218, 255);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}

.wave {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgb(118, 218, 255);
  border-radius: 50%;
}

.wave::before,
.wave::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  top: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45%;
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 6s linear infinite;
  z-index: 1;
}

.wave::after {
  border-radius: 47%;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 10s linear -5s infinite;
  z-index: 2;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #000;
  z-index: 10;
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}

18

Pure Css Wave Progress bar

By: pixeldev

18

Three Hexagons Using Pure CSS

By: pixeldev

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

17

Wavy Grass

By: pixeldev

@-webkit-keyframes {
}
@-webkit-keyframes extend {
    0% {
        width: 600px;
        height: 200px;
        border-radius: 100px;
        } 10% {
        width: 610px;
        height: 210px;
        background: #fff;
        margin-left: - 5px;
        margin-top: - 5px;
        } 20% {
        width: 600px;
        height: 200px;
        background: #6fb07f;
        margin-left: 0px;
        margin-top: 0px;
        } 100% {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        margin-left: 190px;
        background: #6fb07f;
        }
    }
@keyframes extend {
    0% {
        width: 600px;
        height: 200px;
        border-radius: 100px;
        } 10% {
        width: 610px;
        height: 210px;
        background: #fff;
        margin-left: - 5px;
        margin-top: - 5px;
        } 20% {
        width: 600px;
        height: 200px;
        background: #6fb07f;
        margin-left: 0px;
        margin-top: 0px;
        } 100% {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        margin-left: 190px;
        background: #6fb07f;
        }
    }
@-webkit-keyframes {
}
@-webkit-keyframes disappear {
    0% {
        opacity: 1;
        } 20% {
        color: #fff;
        } 100% {
        opacity: 0;
        }
    }
@keyframes disappear {
    0% {
        opacity: 1;
        } 20% {
        color: #fff;
        } 100% {
        opacity: 0;
        }
    }
@-webkit-keyframes {
}
@-webkit-keyframes appear {
    0% {
        opacity: 0;
        } 70% {
        opacity: 0;
        } 100% {
        opacity: 1;
        }
    }
@keyframes appear {
    0% {
        opacity: 0;
        } 70% {
        opacity: 0;
        } 100% {
        opacity: 1;
        }
    }
html {
    background: #fff
    }

input, button, submit {
    border: none
    }

.cont {
    position: absolute;
    width: 610px;
    height: 10px;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -300px
    }

button {
    border-width: 1px;
    width: 600px;
    height: 200px;
    /*border-radius*/
    border-radius: 100px;
    background: #fff;
    position: absolute;
    border: 5px solid #6fb07f
    }

button > span {
    font-size: 48px;
    color: #6fb07f
    }

img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0
    }

button:focus {
    /*animation*/
    -webkit-animation: extend 1s ease-in-out;
    -ms-animation: extend 1s ease-in-out;
    animation: extend 1s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards
    }

button:focus > span {
    /*animation*/
    -webkit-animation: disappear 1s ease-in-out;
    -ms-animation: disappear 1s ease-in-out;
    animation: disappear 1s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards
    }

button:focus > img {
    /*animation*/
    -webkit-animation: appear 1s ease-in-out;
    -ms-animation: appear 1s ease-in-out;
    animation: appear 1s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards
    }

16

Submit Button pure css animation

By: pixeldev

html, body {
    margin: 0;
    color: #fff;
    font-family: Arial;
}

.text-container {
    background: #000;
    width: 100vw;
    height: 100vh;
    font-weight: bold;
    font-size: 36px;
    position: relative;
    overflow: hidden;
}

.text-container > div {
    animation: come2life linear 10s infinite;
    transform-origin: center center;
    opacity: 0;
    width: 250px;
    height: 200px;
    position: absolute;
    backface-visibility: hidden;
}

.text-container > div:nth-child(1) {
    left: 30vw;
    top: 30vh;
    animation-delay: 0s;
}

.text-container > div:nth-child(2) {
    left: 70vw;
    top: 30vh;
    animation-delay: 4s;
}

.text-container > div:nth-child(3) {
    left: 50vw;
    top: 50vh;
    animation-delay: 8s;
}

.text-container > div:nth-child(4) {
    left: 30vw;
    top: 70vh;
    animation-delay: 6s;
}

.text-container > div:nth-child(5) {
    left: 70vw;
    top: 70vh;
    animation-delay: 2s;
}

@keyframes come2life {
    0% {
        transform: scale3d(0,0,1) rotate(0.02deg);
        opacity: 0;
        filter: blur(10px);
    }
    25% {
        transform: scale3d(1,1,1) rotate(0.02deg);
        opacity: 1;
        filter: blur(0px);
    }
    40% {
        opacity: 1;
        filter: blur(0px);
    }

80% {
      opacity: 0;
    }
  
    100% {
        transform: scale3d(4,4,1) rotate(0.02deg);
        filter: blur(10px);
    }
}

16

Text Appearing Animation

By: Nethan Pogi

<details>
  <summary>Item 1</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>
<details>
  <summary>Item 2</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>
<details>
  <summary>Item 3</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>

html, body {color: #fff; background-color: #131417; padding: 15px;}

$fluent-timing: cubic-bezier(.16,1,.29,.99);

@mixin bezier-trans($style: all) {
  $style: unquote($style);
  transition-property: $style;
  transition-duration: .4s;
  transition-timing-function: $fluent-timing;
}

@keyframes fontSizeIn {
	0% {
    font-size: 0;
    opacity: 0;
	}

100% {
    font-size: initial;
    opacity: 0; 
	}
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

100% {
		opacity: 1;
	}
}

details {
  width: 750px;
  margin: auto;

+ details {
    margin-top: 15px;
  }

::-webkit-details-marker {
    display: none; // Hide marker for Blink and Webkit
  }

summary {
    list-style-type: none; // Hide marker for Gecko
    cursor: pointer;
    padding: 5px;

&::after {
      content: "\f107";
      font-family: "Font Awesome 5 Pro";
      display: block;
      float: right;

@include bezier-trans();
    }

+ div {
      margin-top: 10px;
      padding: 5px;
    }
  }

&[open] {
    summary::after {
      transform: rotate(180deg);
    }
 
    div {
      animation-name: fontSizeIn, fadeIn;
      animation-duration: 160ms, 160ms;
      animation-delay: 0ms, 160ms;
    }
  }
}

16