Update website & readme

README.md

@@ -1,6 +1,79 @@
 # Infinite CSS Animations
 A small set of useful infinite CSS animations that you can drop into your project.
 
-##[View Docs and Demo](http://tilomitra.github.io/infinite)
+[View Docs and Demo](http://tilomitra.github.io/infinite)
 
-MIT License. 
+## Usage
+### pulsate
+```
+@-webkit-keyframes pulsate {
+     0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+     50% {opacity: 1.0;}
+     100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
+ }
+
+.pulsate-css {
+    animation: pulsate 1s ease-out;
+    animation-iteration-count: infinite;
+    opacity: 0.0;
+}
+```
+
+## opacityPulsate
+```
+@-webkit-keyframes opacityPulse {
+0% {opacity: 0.0;}
+50% {opacity: 1.0;}
+100% {opacity: 0.0;}
+}
+
+.opacityPulse-css {
+    animation: opacityPulse 2s ease-out;
+    animation-iteration-count: infinite;
+    opacity: 1;
+}
+```
+
+## alertPulse
+```
+@-webkit-keyframes alertPulse {
+    0% {background-color: #9A2727; opacity: 1;}
+    50% {opacity: red; opacity: 0.75; }
+    100% {opacity: #9A2727; opacity: 1;}
+}
+
+.alertPulse-css {
+    animation: alertPulse 2s ease-out;
+    animation-iteration-count: infinite;
+    opacity: 1;
+    background: #9A2727; /* you need this to specify a color to pulse to */
+}
+```
+
+## rotating
+```
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.rotating-css {
+    animation: rotating 2s linear;
+    animation-iteration-count: infinite;
+}
+```
+
+## License
+MIT License.

index.html

@@ -180,8 +180,14 @@ <h2><code>pulsate</code></h2>
             <div class="example-item pulsate-css"></div>
 
             <pre><code>
+@-webkit-keyframes <strong>pulsate</strong> {
+    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+    50% {opacity: 1.0;}
+    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
+}
+
 .pulsate-css {
-    animation: pulsate 1s ease-out;
+    animation: <strong>pulsate</strong> 1s ease-out;
     animation-iteration-count: infinite; 
     opacity: 0.0;
 
@@ -205,8 +211,14 @@ <h2><code>opacityPulse</code></h2>
             </div>
 
             <pre><code>
+@-webkit-keyframes <strong>opacityPulse</strong> {
+0% {opacity: 0.0;}
+50% {opacity: 1.0;}
+100% {opacity: 0.0;}
+}
+
 .opacityPulse-css {
-    animation: opacityPulse 2s ease-out;
+    animation: <strong>opacityPulse</strong> 2s ease-out;
     animation-iteration-count: infinite; 
     opacity: 1;
 }
@@ -221,8 +233,14 @@ <h2><code>alertPulse</code></h2>
             </div>
 
             <pre><code>
+@-webkit-keyframes <strong>alertPulse</strong> {
+    0% {background-color: #9A2727; opacity: 1;}
+    50% {opacity: red; opacity: 0.75; }
+    100% {opacity: #9A2727; opacity: 1;}
+}
+
 .alertPulse-css {
-    animation: alertPulse 2s ease-out;
+    animation: <strong>alertPulse</strong> 2s ease-out;
     animation-iteration-count: infinite;
     opacity: 1;
     background: #9A2727; /* you need this to specify a color to pulse to */
@@ -238,8 +256,25 @@ <h2><code>rotating</code></h2>
             </div>
 
             <pre><code>
+@keyframes <strong>rotating</strong> {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 .rotating-css {
-    animation: rotating 2s linear;
+    animation: <strong>rotating</strong> 2s linear;
     animation-iteration-count: infinite;
 }
             </code></pre>