CSS Animation

In this example below you will see how to do a CSS Animation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Mikari, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Mikari ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div style="width:900px; text-align:left; margin: 0px auto 0px auto; padding:20px;">

<span class="navpart">CSS Animation</span>

<br />

<div class="left">

<table style="float:right; margin:0px 0px 0px 20px; height:160px;"><tr>

<td style="padding:0px 5px 0px 5px; vertical-align:top;"><div class="showbor" id="ani1"></div></td>

<td style="padding:0px 5px 0px 5px; vertical-align:top;"><div class="showbor" id="ani2"></div></td>

<td style="padding:0px 5px 0px 5px; vertical-align:top;"><div class="showbor" id="ani3"></div></td>

</tr></table>

div#ani1 { width:20px; height:25px; 
&nbsp;
animation-name: anime1;
&nbsp;
animation-duration: 4s;
&nbsp;
animation-delay: 0s;
&nbsp;
animation-timing-function: linear;
&nbsp;
animation-iteration-count: infinite;
&nbsp;
animation-direction: alternate;
&nbsp;
animation-play-state: running; }

<br /><br />

animation-name: anime1; &nbsp; (animation name, must be unique)

<br />

animation-duration: 4s; &nbsp; (time to complete the animation, s = second and ms = miliseconds)

<br />

animation-delay: 0s; &nbsp; (time before the animation starts)

<br />

animation-timing-function: linear; &nbsp; (same speed throughout animation, I find that the % are better for setting different speeds so I always use this setting)

<br />

animation-iteration-count: infinite; &nbsp; (times the animation is repeat, 1, 2, etc. or infinite)

<br />

animation-direction: alternate; &nbsp; (goes back and forth)

<br />

animation-direction: normal; &nbsp; (play the animation one way)

<br />

animation-direction: reverse; &nbsp; (play the animation backwards)

<br />

animation-play-state: running; &nbsp; (self explanatory, the other option is paused)

<br /><br />

After defining the animation style, the content can be any numerical CSS, including colors. 

Use animation-play-state: paused; setting then add animation-play-state: running; to the :hover to make it a mouse over effect.

<br /><br />

<table style="float:right; margin:0px 0px 10px 20px;"><tr>
<td style="padding:0px 5px 0px 5px; vertical-align:top;"><div class="showbor" id="ani4">Grayscale</div></td>
<td style="padding:0px 5px 0px 5px; vertical-align:top;"><div class="showbor" id="ani5">Grayscale</div></td>
</tr><tr><td style="height:10px;" colspan="2"></td></tr><tr>
<td style="padding:0px 5px 0px 5px; vertical-align:top;"><div class="showbor" id="ani6">Colors!</div></td>
<td style="padding:0px 5px 0px 5px; vertical-align:top;"><div class="showbor" id="ani7">Colors!</div></td>
</tr></table>

@keyframes anime1 {
&nbsp;
0% { height: 20px; background-color:#0047ab; }
&nbsp;
100% { height: 150px; background-color:#87cefa; } }

<br /><br />

div#ani5 { animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: anime2; 
animation-play-state: paused; }

<br />

div#ani5:hover { animation-play-state: running; }

<br /><br />

@keyframes anime2 {
&nbsp;
0% { color:#ffffff; text-shadow: -1px 1px 0px #000000; }
&nbsp;
100% { color:#000000; text-shadow: -1px 1px 0px #ffffff; } }

<br /><br />

img#ani8 { position:relative; left:0px; 
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running; 
animation-name: anime4; }

<br /><br />


@keyframes anime4 {
0% { left:0px; opacity:0.0; }
10% { left:0px; opacity:1.0; } 
90%  { left:300px; opacity:1.0; }
100% { left:300px; opacity:0.0; } }

<br /><br />

The % allows you to distribute the duration time among the key animation frames so that a certain frame happens at a specific % of time. 

For browser compatibility add a copy of the animation and @keyframes codes with -webkit-. <span class="itlet">animation</span> -&gt; <span class="itlet">-webkit-animation</span> and <span class="itlet">@keyframes</span> -&gt; <span class="itlet">@-webkit-keyframes</span>. 

</div>
<br />
<a href="http://azurelight.net">AzureLight.net</a> | 
<a href="http://mikaristar.deviantart.com">MikariStar.DeviantArt.com</a> | 
<a href="http://artrift.com/Mikari/">ArtRift.com/Mikari/</a> | 
<a href="http://miliazure.wordpress.com">MiliAzure.WordPress.com</a>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Mikari/css-animation-wgJJBO */
body { padding:0px; margin:0px; font-family:Arial; font-size:14px; line-height:20px; 
color:#393939; background-color:#c2f0ff; text-align:center; }

::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background-color:#c2f0ff; }
::-webkit-scrollbar-thumb { border-radius: 20px; background-color:#ff9adc; border: 0px none; }

.showbor { border:0px none; border:3px dotted #ff9adc; padding:0px; } 

a { color:#ff71ce; text-decoration:none; }

div#ani1, div#ani2, div#ani3 { width:20px; height:25px;
animation-name: anime1;
animation-duration: 4s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running; }

div#ani1 { animation-direction: alternate; }

div#ani2 { animation-direction: normal; }

div#ani3 { animation-direction: reverse; }

@keyframes anime1 {
0% { height: 20px; background-color:#0047ab; }
100% { height: 150px; background-color:#87cefa; } }

div#ani4, div#ani5, div#ani6, div#ani7 { width:100px; height:25px;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
text-align:center; font-weight:bold; }

div#ani4 { animation-play-state: running; animation-name: anime2; }

div#ani5 { animation-play-state: paused; animation-name: anime2; }
div#ani5:hover { animation-play-state: running; }

@keyframes anime2 {
0% { color:#ffffff; text-shadow: -1px 1px 0px #000000; }
100% { color:#000000; text-shadow: -1px 1px 0px #ffffff; } }

div#ani6 { animation-play-state: running; animation-name: anime3;}

div#ani7 { animation-play-state: paused; animation-name: anime3; }
div#ani7:hover { animation-play-state: running; }

@keyframes anime3 {
0% { color:#0080ff; }
100% { color:#ff5cb0; } }

img#ani8 { position:relative; left:0px; 
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running; 
animation-name: anime4; }

@keyframes anime4 {
0% { left:0px; opacity:0.0; }
10% { left:0px; opacity:1.0; } 
90%  { left:300px; opacity:1.0; }
100% { left:300px; opacity:0.0; } }

img.slide0 { animation-duration: 7s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running; }

img#slide1 { animation-name: slideshow1; }
img#slide2 { animation-name: slideshow2; }
img#slide3 { animation-name: slideshow3; }

@keyframes slideshow1 {
0% { opacity:0.0; } 
16% { opacity:1.0; } 
33% { opacity:0.0; } 
49% { opacity:0.0; } 
66% { opacity:0.0; } 
82% { opacity:0.0; } 
99% { opacity:0.0; } 
100% { opacity:0.0; } }

@keyframes slideshow2 {
0% { opacity:0.0; } 
16% { opacity:0.0; } 
33% { opacity:0.0; } 
49% { opacity:1.0; } 
66% { opacity:0.0; } 
82% { opacity:0.0; } 
99% { opacity:0.0; } 
100% { opacity:0.0; } }

@keyframes slideshow3 {
0% { opacity:0.0; } 
16% { opacity:0.0; } 
33% { opacity:0.0; } 
49% { opacity:0.0; } 
66% { opacity:0.0; } 
82% { opacity:1.0; } 
99% { opacity:0.0; } 
100% { opacity:0.0; } }



div#ani1, div#ani2, div#ani3 { width:20px; height:25px;
-webkit-animation-name: anime1;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running; }

div#ani1 { -webkit-animation-direction: alternate; }

div#ani2 { -webkit-animation-direction: normal; }

div#ani3 { -webkit-animation-direction: reverse; }

@-webkit-keyframes anime1 {
0% { height: 20px; background-color:#0047ab; }
100% { height: 150px; background-color:#87cefa; } }

div#ani4, div#ani5, div#ani6, div#ani7 { width:100px; height:25px;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
text-align:center; font-weight:bold; }

div#ani4 { -webkit-animation-play-state: running; -webkit-animation-name: anime2; }

div#ani5 { -webkit-animation-play-state: paused; -webkit-animation-name: anime2; }
div#ani5:hover { -webkit-animation-play-state: running; }

@-webkit-keyframes anime2 {
0% { color:#ffffff; text-shadow: -1px 1px 0px #000000; }
100% { color:#000000; text-shadow: -1px 1px 0px #ffffff; } }

div#ani6 { -webkit-animation-play-state: running; -webkit-animation-name: anime3;}

div#ani7 { -webkit-animation-play-state: paused; -webkit-animation-name: anime3; }
div#ani7:hover { -webkit-animation-play-state: running; }

@-webkit-keyframes anime3 {
0% { color:#0080ff; }
100% { color:#ff5cb0; } }

img#ani8 { position:relative; left:0px; 
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running; 
-webkit-animation-name: anime4; }

@-webkit-keyframes anime4 {
0% { left:0px; opacity:0.0; }
10% { left:0px; opacity:1.0; } 
90%  { left:300px; opacity:1.0; }
100% { left:300px; opacity:0.0; } }

img.slide0 { -webkit-animation-duration: 7s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running; }

img#slide1 { -webkit-animation-name: slideshow1; }
img#slide2 { -webkit-animation-name: slideshow2; }
img#slide3 { -webkit-animation-name: slideshow3; }

@-webkit-keyframes slideshow1 {
0% { opacity:0.0; } 
16% { opacity:1.0; } 
33% { opacity:0.0; } 
49% { opacity:0.0; } 
66% { opacity:0.0; } 
82% { opacity:0.0; } 
99% { opacity:0.0; } 
100% { opacity:0.0; } }

@-webkit-keyframes slideshow2 {
0% { opacity:0.0; } 
16% { opacity:0.0; } 
33% { opacity:0.0; } 
49% { opacity:1.0; } 
66% { opacity:0.0; } 
82% { opacity:0.0; } 
99% { opacity:0.0; } 
100% { opacity:0.0; } }

@-webkit-keyframes slideshow3 {
0% { opacity:0.0; } 
16% { opacity:0.0; } 
33% { opacity:0.0; } 
49% { opacity:0.0; } 
66% { opacity:0.0; } 
82% { opacity:1.0; } 
99% { opacity:0.0; } 
100% { opacity:0.0; } }

Comments