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;
}