cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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 { 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; } }
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console