Skip to content
Browse files

i fix animations all nice and nice.

  • Loading branch information...
1 parent 8e1cae2 commit 392a519d0acfd782b34d30b2b87e92d984ad9a3d @paulirish committed Oct 18, 2011
Showing with 23 additions and 17 deletions.
  1. +23 −17 index.html
View
40 index.html
@@ -194,23 +194,28 @@
<div id="box_bgsize" class="rule_wrapper commentedout">
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
-@keyframe {
- @-webkit-keyframe <b g="0">MyFrame</b> { <span class="comment">/* Saf5, Chrome<span class="endcomment">*/</span></span>
- <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
- <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
- <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
- }
- @-moz-keyframe <b g="0">MyFrame</b> { <span class="comment">/* FF5+ <span class="endcomment">*/</span></span>
- <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
- <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
- <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
- }
- @keyframe <b g="0">MyFrame</b> {
- <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
- <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
- <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
- }
-}</pre>
+.box_animation {
+ -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Saf5, Chrome <span class="endcomment">*/</span></span>
+ -moz-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* FF5+ <span class="endcomment">*/</span></span>
+ -ms-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* IE10pp3 <span class="endcomment">*/</span></span>
+}
+
+@-webkit-keyframes <b g="0">myanim</b> {
+ <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
+ <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
+ <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
+}
+@-moz-keyframes <b g="0">myanim</b> {
+ <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
+ <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
+ <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
+}
+@-ms-keyframes <b g="0">myanim</b> {
+ <b g="1">0%</b> { <b g="2">opacity</b>: <b g="3">0.0</b>; }
+ <b g="4">50%</b> { <b g="2">opacity</b>: <b g="5">0.5</b>; }
+ <b g="6">100%</b> { <b g="2">opacity</b>: <b g="7">1.0</b>; }
+}
+</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -247,6 +252,7 @@
/*
__Changelog__
+ 2011.10.18: <a href="http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/">CSS Animations</a> added. (thx <a href="//twitter.com/wookiehangover">wookiehangover</a>!)
2011.07.27: Added multicolumn. (thx <a href="https://twitter.com/hotmeteor" target="_blank">hotmeteor</a>!)
2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein" target="_blank">calvein</a>!)
2011.04.11: Added <a href="https://developer.mozilla.org/en/CSS/background-clip" target="_blank">background-clip</a> for the border-radius rule (thx <a href="//twitter.com/matthewlein" target="_blank">matthewlein</a>!).

0 comments on commit 392a519

Please sign in to comment.
Something went wrong with that request. Please try again.