×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: CSS
Posted by: Daniel Vaughn
Added: Dec 8, 2012 6:06 PM
Views: 26
Tags: no tags
  1. /*
  2.   this is a code sample for CSS3 animations. In my samples I only include webkit properties. all other vendor prefixes are needed for animations.
  3. */
  4.  
  5. /*
  6.   base styles that are unrelated to the code sample
  7. */
  8. .one {
  9.   width: 300px;
  10.   height: 300px;
  11.   margin: 2em auto;
  12.   border: 1px solid gray;
  13. }
  14.  
  15. /*
  16.   set up keyframe animation first and label it. I named it test, but you can call it whatever you like. Then call it inside the class declaration below, just like a function.
  17. */
  18. @-webkit-keyframes test {
  19.   from {
  20.     background: rgb(50,50,50);
  21.   }
  22.   to {
  23.     background: rgb(255,80,0);
  24.   }
  25. }
  26.  
  27. @keyframes test {
  28.   from {
  29.     background: rgb(50,50,50);
  30.   }
  31.   to {
  32.     background: rgb(255,80,0);
  33.   }
  34. }
  35.  
  36. /*
  37.   call the animation
  38. */
  39. .one {
  40.   -moz-animation: test 5s;
  41.   -webkit-animation: test 5s;
  42.   -o-animation: test 5s;
  43.   animation: test 5s;  
  44. }