diff --git a/README.md b/README.md index eb1031d..dedf902 100644 --- a/README.md +++ b/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. \ No newline at end of file +## 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. \ No newline at end of file diff --git a/index.html b/index.html index 32ae4d1..a7f6958 100644 --- a/index.html +++ b/index.html @@ -180,8 +180,14 @@

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: pulsate 1s ease-out;
     animation-iteration-count: infinite; 
     opacity: 0.0;
 
@@ -205,8 +211,14 @@ 

opacityPulse


+@-webkit-keyframes opacityPulse {
+0% {opacity: 0.0;}
+50% {opacity: 1.0;}
+100% {opacity: 0.0;}
+}
+
 .opacityPulse-css {
-    animation: opacityPulse 2s ease-out;
+    animation: opacityPulse 2s ease-out;
     animation-iteration-count: infinite; 
     opacity: 1;
 }
@@ -221,8 +233,14 @@ 

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: alertPulse 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 @@ 

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: rotating 2s linear;
     animation-iteration-count: infinite;
 }