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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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
Loading ..................

Console