From bc371463d5993e6862e80603c92922483984247e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 24 Jan 2014 14:25:06 +0100 Subject: [PATCH] Shorter CSS classes are better + Add bounce animation --- demo/index.html | 56 +++++++++------ dist/font-awesome-animation.css | 101 +++++++++++++++++----------- dist/font-awesome-animation.min.css | 2 +- src/font-awesome-animation.css | 101 +++++++++++++++++----------- 4 files changed, 160 insertions(+), 100 deletions(-) diff --git a/demo/index.html b/demo/index.html index 42c246f..eb92c16 100644 --- a/demo/index.html +++ b/demo/index.html @@ -92,70 +92,84 @@
- -  wrenching-animation animation + +  faa-wrench animated
- -  wrenching-animation animation-hover + +  faa-wrench animated-hover
- -  ringing-animation animation + +  faa-ring animated
- -  ringing-animation animation-hover + +  faa-ring animated-hover
- -  horizontal-animation animation + +  faa-horizontal animated
- -  horizontal-animation animation-hover + +  faa-horizontal animated-hover
- -  vertical-animation animation + +  faa-vertical animated
- -  vertical-animation animation-hover + +  faa-vertical animated-hover
- -  flash-animation animation + +  faa-flash animated
- -  flash-animation animation-hover + +  faa-flash animated-hover + +
+
+
+
+ + +  faa-bounce animated + +
+
+ + +  faa-bounce animation-hover
@@ -165,7 +179,7 @@ diff --git a/dist/font-awesome-animation.css b/dist/font-awesome-animation.css index e73e17c..d1f4921 100644 --- a/dist/font-awesome-animation.css +++ b/dist/font-awesome-animation.css @@ -2,7 +2,7 @@ * font-awesome-animation - v0.0.2 * https://github.com/l-lin/font-awesome-animation */ -@-moz-keyframes wrenching { +@-moz-keyframes wrench { 0%{-moz-transform:rotate(-12deg)} 8%{-moz-transform:rotate(12deg)} 10%{-moz-transform:rotate(24deg)} @@ -19,7 +19,7 @@ 68%{-moz-transform:rotate(24deg)} 75%{-moz-transform:rotate(0deg)} } -@-webkit-keyframes wrenching { +@-webkit-keyframes wrench { 0%{-webkit-transform:rotate(-12deg)} 8%{-webkit-transform:rotate(12deg)} 10%{-webkit-transform:rotate(24deg)} @@ -36,7 +36,7 @@ 68%{-webkit-transform:rotate(24deg)} 75%{-webkit-transform:rotate(0deg)} } -@-o-keyframes wrenching { +@-o-keyframes wrench { 0%{-o-transform:rotate(-12deg)} 8%{-o-transform:rotate(12deg)} 10%{-o-transform:rotate(24deg)} @@ -53,7 +53,7 @@ 68%{-o-transform:rotate(24deg)} 75%{-o-transform:rotate(0deg)} } -@-ms-keyframes wrenching { +@-ms-keyframes wrench { 0%{-ms-transform:rotate(-12deg)} 8%{-ms-transform:rotate(12deg)} 10%{-ms-transform:rotate(24deg)} @@ -70,7 +70,7 @@ 68%{-ms-transform:rotate(24deg)} 75%{-ms-transform:rotate(0deg)} } -@keyframes wrenching { +@keyframes wrench { 0%{transform:rotate(-12deg)} 8%{transform:rotate(12deg)} 10%{transform:rotate(24deg)} @@ -87,31 +87,30 @@ 68%{transform:rotate(24deg)} 75%{transform:rotate(0deg)} } -.wrenching-animation.animation, .wrenching-animation.animation-hover:hover { - display: inline-block; - -moz-animation: wrenching 2.5s ease 4; +.faa-wrench.animated, .faa-wrench.animated-hover:hover { + -moz-animation: wrench 2.5s ease infinite; -moz-transform-origin-x: 90%; -moz-transform-origin-y: 35%; -moz-transform-origin-z: initial; - -webkit-animation: wrenching 2.5s ease 4; + -webkit-animation: wrench 2.5s ease infinite; -webkit-transform-origin-x: 90%; -webkit-transform-origin-y: 35%; -webkit-transform-origin-z: initial; - -ms-animation: wrenching 2.5s ease 4; + -ms-animation: wrench 2.5s ease infinite; -ms-transform-origin-x: 90%; -ms-transform-origin-y: 35%; -ms-transform-origin-z: initial; - animation: wrenching 2.5s ease 4; + animation: wrench 2.5s ease infinite; transform-origin-x: 90%; transform-origin-y: 35%; transform-origin-z: initial; } /* BELL */ -@-moz-keyframes ringing { +@-moz-keyframes ring { 0%{-moz-transform:rotate(-15deg)} 2%{-moz-transform:rotate(15deg)} 4%{-moz-transform:rotate(-18deg)} @@ -124,7 +123,7 @@ 18%{-moz-transform:rotate(12deg)} 20%{-moz-transform:rotate(0deg)} } -@-webkit-keyframes ringing { +@-webkit-keyframes ring { 0%{-webkit-transform:rotate(-15deg)} 2%{-webkit-transform:rotate(15deg)} 4%{-webkit-transform:rotate(-18deg)} @@ -137,7 +136,7 @@ 18%{-webkit-transform:rotate(12deg)} 20%{-webkit-transform:rotate(0deg)} } -@-ms-keyframes ringing { +@-ms-keyframes ring { 0%{-ms-transform:rotate(-15deg)} 2%{-ms-transform:rotate(15deg)} 4%{-ms-transform:rotate(-18deg)} @@ -150,7 +149,7 @@ 18%{-ms-transform:rotate(12deg)} 20%{-ms-transform:rotate(0deg)} } -@keyframes ringing { +@keyframes ring { 0%{transform:rotate(-15deg)} 2%{transform:rotate(15deg)} 4%{transform:rotate(-18deg)} @@ -163,24 +162,23 @@ 18%{transform:rotate(12deg)} 20%{transform:rotate(0deg)} } -.ringing-animation.animation, .ringing-animation.animation-hover:hover { - display: inline-block; - -moz-animation: ringing 2s ease 5; +.faa-ring.animated, .faa-ring.animated-hover:hover { + -moz-animation: ring 2s ease infinite; -moz-transform-origin-x: 50%; -moz-transform-origin-y: 0px; -moz-transform-origin-z: initial; - -webkit-animation: ringing 2s ease 5; + -webkit-animation: ring 2s ease infinite; -webkit-transform-origin-x: 50%; -webkit-transform-origin-y: 0px; -webkit-transform-origin-z: initial; - -ms-animation: ringing 2s ease 5; + -ms-animation: ring 2s ease infinite; -ms-transform-origin-x: 50%; -ms-transform-origin-y: 0px; -ms-transform-origin-z: initial; - animation: ringing 2s ease 5; + animation: ring 2s ease infinite; transform-origin-x: 50%; transform-origin-y: 0px; transform-origin-z: initial; @@ -223,12 +221,11 @@ 20%{transform:translate(0,3px)} 22%{transform:translate(0,0)} } -.vertical-animation.animation, .vertical-animation.animation-hover:hover { - display: inline-block; - -moz-animation: vertical 2s ease 5; - -webkit-animation: vertical 2s ease 5; - -ms-animation: vertical 2s ease 5; - animation: vertical 2s ease 5; +.faa-vertical.animated, .faa-vertical.animated-hover:hover { + -moz-animation: vertical 2s ease infinite; + -webkit-animation: vertical 2s ease infinite; + -ms-animation: vertical 2s ease infinite; + animation: vertical 2s ease infinite; } /* HORIZONTAL */ @@ -268,12 +265,11 @@ 30%{transform:translate(5px,0)} 36%{transform:translate(0,0)} } -.horizontal-animation.animation, .horizontal-animation.animation-hover:hover { - display:inline-block; - -moz-animation: horizontal 2s ease 5; - -webkit-animation: horizontal 2s ease 5; - -ms-animation: horizontal 2s ease 5; - animation: horizontal 2s ease 5; +.faa-horizontal.animated, .faa-horizontal.animated-hover:hover { + -moz-animation: horizontal 2s ease infinite; + -webkit-animation: horizontal 2s ease infinite; + -ms-animation: horizontal 2s ease infinite; + animation: horizontal 2s ease infinite; } /* FLASHING */ @@ -293,10 +289,37 @@ 0%,100%,50%{opacity:1} 25%,75%{opacity:0} } -.flash-animation.animation, .flash-animation.animation-hover:hover { - display:inline-block; - -moz-animation: flash 2s ease 5; - -webkit-animation: flash 2s ease 5; - -ms-animation: flash 2s ease 5; - animation: flash 2s ease 5; +.faa-flash.animated, .faa-flash.animated-hover:hover { + -moz-animation: flash 2s ease infinite; + -webkit-animation: flash 2s ease infinite; + -ms-animation: flash 2s ease infinite; + animation: flash 2s ease infinite; +} + +/* BOUNCE */ +@-moz-keyframes bounce { + 0%,100%,20%,50%,80%{-moz-transform:translateY(0)} + 40%{-moz-transform:translateY(-15px)} + 60%{-moz-transform:translateY(-15px)} +} +@-webkit-keyframes bounce { + 0%,100%,20%,50%,80%{-webkit-transform:translateY(0)} + 40%{-webkit-transform:translateY(-15px)} + 60%{-webkit-transform:translateY(-15px)} +} +@-ms-keyframes bounce { + 0%,100%,20%,50%,80%{-ms-transform:translateY(0)} + 40%{-ms-transform:translateY(-15px)} + 60%{-ms-transform:translateY(-15px)} +} +@keyframes bounce { + 0%,10%,20%,50%,80%{transform:translateY(0)} + 40%{transform:translateY(-15px)} + 60%{transform:translateY(-15px)} +} +.faa-bounce.animated, .faa-bounce.animated-hover:hover { + -moz-animation: bounce 2s ease infinite; + -webkit-animation: bounce 2s ease infinite; + -ms-animation: bounce 2s ease infinite; + animation: bounce 2s ease infinite; } \ No newline at end of file diff --git a/dist/font-awesome-animation.min.css b/dist/font-awesome-animation.min.css index 0d4c67f..c009fe7 100644 --- a/dist/font-awesome-animation.min.css +++ b/dist/font-awesome-animation.min.css @@ -3,4 +3,4 @@ * https://github.com/l-lin/font-awesome-animation */ -@-moz-keyframes wrenching{0%{-moz-transform:rotate(-12deg)}8%{-moz-transform:rotate(12deg)}10%{-moz-transform:rotate(24deg)}18%,20%{-moz-transform:rotate(-24deg)}28%,30%{-moz-transform:rotate(24deg)}38%,40%{-moz-transform:rotate(-24deg)}48%,50%{-moz-transform:rotate(24deg)}58%,60%{-moz-transform:rotate(-24deg)}68%{-moz-transform:rotate(24deg)}75%{-moz-transform:rotate(0deg)}}@-webkit-keyframes wrenching{0%{-webkit-transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg)}75%{-webkit-transform:rotate(0deg)}}@-o-keyframes wrenching{0%{-o-transform:rotate(-12deg)}8%{-o-transform:rotate(12deg)}10%{-o-transform:rotate(24deg)}18%,20%{-o-transform:rotate(-24deg)}28%,30%{-o-transform:rotate(24deg)}38%,40%{-o-transform:rotate(-24deg)}48%,50%{-o-transform:rotate(24deg)}58%,60%{-o-transform:rotate(-24deg)}68%{-o-transform:rotate(24deg)}75%{-o-transform:rotate(0deg)}}@-ms-keyframes wrenching{0%{-ms-transform:rotate(-12deg)}8%{-ms-transform:rotate(12deg)}10%{-ms-transform:rotate(24deg)}18%,20%{-ms-transform:rotate(-24deg)}28%,30%{-ms-transform:rotate(24deg)}38%,40%{-ms-transform:rotate(-24deg)}48%,50%{-ms-transform:rotate(24deg)}58%,60%{-ms-transform:rotate(-24deg)}68%{-ms-transform:rotate(24deg)}75%{-ms-transform:rotate(0deg)}}@keyframes wrenching{0%{transform:rotate(-12deg)}8%{transform:rotate(12deg)}10%{transform:rotate(24deg)}18%,20%{transform:rotate(-24deg)}28%,30%{transform:rotate(24deg)}38%,40%{transform:rotate(-24deg)}48%,50%{transform:rotate(24deg)}58%,60%{transform:rotate(-24deg)}68%{transform:rotate(24deg)}75%{transform:rotate(0deg)}}.wrenching-animation.animation,.wrenching-animation.animation-hover:hover{display:inline-block;-moz-animation:wrenching 2.5s ease 4;-moz-transform-origin-x:90%;-moz-transform-origin-y:35%;-moz-transform-origin-z:initial;-webkit-animation:wrenching 2.5s ease 4;-webkit-transform-origin-x:90%;-webkit-transform-origin-y:35%;-webkit-transform-origin-z:initial;-ms-animation:wrenching 2.5s ease 4;-ms-transform-origin-x:90%;-ms-transform-origin-y:35%;-ms-transform-origin-z:initial;animation:wrenching 2.5s ease 4;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}@-moz-keyframes ringing{0%{-moz-transform:rotate(-15deg)}2%{-moz-transform:rotate(15deg)}4%{-moz-transform:rotate(-18deg)}6%{-moz-transform:rotate(18deg)}8%{-moz-transform:rotate(-22deg)}10%{-moz-transform:rotate(22deg)}12%{-moz-transform:rotate(-18deg)}14%{-moz-transform:rotate(18deg)}16%{-moz-transform:rotate(-12deg)}18%{-moz-transform:rotate(12deg)}20%{-moz-transform:rotate(0deg)}}@-webkit-keyframes ringing{0%{-webkit-transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg)}20%{-webkit-transform:rotate(0deg)}}@-ms-keyframes ringing{0%{-ms-transform:rotate(-15deg)}2%{-ms-transform:rotate(15deg)}4%{-ms-transform:rotate(-18deg)}6%{-ms-transform:rotate(18deg)}8%{-ms-transform:rotate(-22deg)}10%{-ms-transform:rotate(22deg)}12%{-ms-transform:rotate(-18deg)}14%{-ms-transform:rotate(18deg)}16%{-ms-transform:rotate(-12deg)}18%{-ms-transform:rotate(12deg)}20%{-ms-transform:rotate(0deg)}}@keyframes ringing{0%{transform:rotate(-15deg)}2%{transform:rotate(15deg)}4%{transform:rotate(-18deg)}6%{transform:rotate(18deg)}8%{transform:rotate(-22deg)}10%{transform:rotate(22deg)}12%{transform:rotate(-18deg)}14%{transform:rotate(18deg)}16%{transform:rotate(-12deg)}18%{transform:rotate(12deg)}20%{transform:rotate(0deg)}}.ringing-animation.animation,.ringing-animation.animation-hover:hover{display:inline-block;-moz-animation:ringing 2s ease 5;-moz-transform-origin-x:50%;-moz-transform-origin-y:0;-moz-transform-origin-z:initial;-webkit-animation:ringing 2s ease 5;-webkit-transform-origin-x:50%;-webkit-transform-origin-y:0;-webkit-transform-origin-z:initial;-ms-animation:ringing 2s ease 5;-ms-transform-origin-x:50%;-ms-transform-origin-y:0;-ms-transform-origin-z:initial;animation:ringing 2s ease 5;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}@-moz-keyframes vertical{0%{-moz-transform:translate(0,-3px)}4%{-moz-transform:translate(0,3px)}8%{-moz-transform:translate(0,-3px)}12%{-moz-transform:translate(0,3px)}16%{-moz-transform:translate(0,-3px)}20%{-moz-transform:translate(0,3px)}22%{-moz-transform:translate(0,0)}}@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px)}22%{-webkit-transform:translate(0,0)}}@-ms-keyframes vertical{0%{-ms-transform:translate(0,-3px)}4%{-ms-transform:translate(0,3px)}8%{-ms-transform:translate(0,-3px)}12%{-ms-transform:translate(0,3px)}16%{-ms-transform:translate(0,-3px)}20%{-ms-transform:translate(0,3px)}22%{-ms-transform:translate(0,0)}}@keyframes vertical{0%{transform:translate(0,-3px)}4%{transform:translate(0,3px)}8%{transform:translate(0,-3px)}12%{transform:translate(0,3px)}16%{transform:translate(0,-3px)}20%{transform:translate(0,3px)}22%{transform:translate(0,0)}}.vertical-animation.animation,.vertical-animation.animation-hover:hover{display:inline-block;-moz-animation:vertical 2s ease 5;-webkit-animation:vertical 2s ease 5;-ms-animation:vertical 2s ease 5;animation:vertical 2s ease 5}@-moz-keyframes horizontal{0%{-moz-transform:translate(0,0)}6%{-moz-transform:translate(5px,0)}12%{-moz-transform:translate(0,0)}18%{-moz-transform:translate(5px,0)}24%{-moz-transform:translate(0,0)}30%{-moz-transform:translate(5px,0)}36%{-moz-transform:translate(0,0)}}@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0)}6%{-webkit-transform:translate(5px,0)}12%{-webkit-transform:translate(0,0)}18%{-webkit-transform:translate(5px,0)}24%{-webkit-transform:translate(0,0)}30%{-webkit-transform:translate(5px,0)}36%{-webkit-transform:translate(0,0)}}@-ms-keyframes horizontal{0%{-ms-transform:translate(0,0)}6%{-ms-transform:translate(5px,0)}12%{-ms-transform:translate(0,0)}18%{-ms-transform:translate(5px,0)}24%{-ms-transform:translate(0,0)}30%{-ms-transform:translate(5px,0)}36%{-ms-transform:translate(0,0)}}@keyframes horizontal{0%{transform:translate(0,0)}6%{transform:translate(5px,0)}12%{transform:translate(0,0)}18%{transform:translate(5px,0)}24%{transform:translate(0,0)}30%{transform:translate(5px,0)}36%{transform:translate(0,0)}}.horizontal-animation.animation,.horizontal-animation.animation-hover:hover{display:inline-block;-moz-animation:horizontal 2s ease 5;-webkit-animation:horizontal 2s ease 5;-ms-animation:horizontal 2s ease 5;animation:horizontal 2s ease 5}@-moz-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-ms-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash-animation.animation,.flash-animation.animation-hover:hover{display:inline-block;-moz-animation:flash 2s ease 5;-webkit-animation:flash 2s ease 5;-ms-animation:flash 2s ease 5;animation:flash 2s ease 5} \ No newline at end of file +@-moz-keyframes wrench{0%{-moz-transform:rotate(-12deg)}8%{-moz-transform:rotate(12deg)}10%{-moz-transform:rotate(24deg)}18%,20%{-moz-transform:rotate(-24deg)}28%,30%{-moz-transform:rotate(24deg)}38%,40%{-moz-transform:rotate(-24deg)}48%,50%{-moz-transform:rotate(24deg)}58%,60%{-moz-transform:rotate(-24deg)}68%{-moz-transform:rotate(24deg)}75%{-moz-transform:rotate(0deg)}}@-webkit-keyframes wrench{0%{-webkit-transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg)}75%{-webkit-transform:rotate(0deg)}}@-o-keyframes wrench{0%{-o-transform:rotate(-12deg)}8%{-o-transform:rotate(12deg)}10%{-o-transform:rotate(24deg)}18%,20%{-o-transform:rotate(-24deg)}28%,30%{-o-transform:rotate(24deg)}38%,40%{-o-transform:rotate(-24deg)}48%,50%{-o-transform:rotate(24deg)}58%,60%{-o-transform:rotate(-24deg)}68%{-o-transform:rotate(24deg)}75%{-o-transform:rotate(0deg)}}@-ms-keyframes wrench{0%{-ms-transform:rotate(-12deg)}8%{-ms-transform:rotate(12deg)}10%{-ms-transform:rotate(24deg)}18%,20%{-ms-transform:rotate(-24deg)}28%,30%{-ms-transform:rotate(24deg)}38%,40%{-ms-transform:rotate(-24deg)}48%,50%{-ms-transform:rotate(24deg)}58%,60%{-ms-transform:rotate(-24deg)}68%{-ms-transform:rotate(24deg)}75%{-ms-transform:rotate(0deg)}}@keyframes wrench{0%{transform:rotate(-12deg)}8%{transform:rotate(12deg)}10%{transform:rotate(24deg)}18%,20%{transform:rotate(-24deg)}28%,30%{transform:rotate(24deg)}38%,40%{transform:rotate(-24deg)}48%,50%{transform:rotate(24deg)}58%,60%{transform:rotate(-24deg)}68%{transform:rotate(24deg)}75%{transform:rotate(0deg)}}.faa-wrench.animated,.faa-wrench.animated-hover:hover{-moz-animation:wrench 2.5s ease infinite;-moz-transform-origin-x:90%;-moz-transform-origin-y:35%;-moz-transform-origin-z:initial;-webkit-animation:wrench 2.5s ease infinite;-webkit-transform-origin-x:90%;-webkit-transform-origin-y:35%;-webkit-transform-origin-z:initial;-ms-animation:wrench 2.5s ease infinite;-ms-transform-origin-x:90%;-ms-transform-origin-y:35%;-ms-transform-origin-z:initial;animation:wrench 2.5s ease infinite;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}@-moz-keyframes ring{0%{-moz-transform:rotate(-15deg)}2%{-moz-transform:rotate(15deg)}4%{-moz-transform:rotate(-18deg)}6%{-moz-transform:rotate(18deg)}8%{-moz-transform:rotate(-22deg)}10%{-moz-transform:rotate(22deg)}12%{-moz-transform:rotate(-18deg)}14%{-moz-transform:rotate(18deg)}16%{-moz-transform:rotate(-12deg)}18%{-moz-transform:rotate(12deg)}20%{-moz-transform:rotate(0deg)}}@-webkit-keyframes ring{0%{-webkit-transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg)}20%{-webkit-transform:rotate(0deg)}}@-ms-keyframes ring{0%{-ms-transform:rotate(-15deg)}2%{-ms-transform:rotate(15deg)}4%{-ms-transform:rotate(-18deg)}6%{-ms-transform:rotate(18deg)}8%{-ms-transform:rotate(-22deg)}10%{-ms-transform:rotate(22deg)}12%{-ms-transform:rotate(-18deg)}14%{-ms-transform:rotate(18deg)}16%{-ms-transform:rotate(-12deg)}18%{-ms-transform:rotate(12deg)}20%{-ms-transform:rotate(0deg)}}@keyframes ring{0%{transform:rotate(-15deg)}2%{transform:rotate(15deg)}4%{transform:rotate(-18deg)}6%{transform:rotate(18deg)}8%{transform:rotate(-22deg)}10%{transform:rotate(22deg)}12%{transform:rotate(-18deg)}14%{transform:rotate(18deg)}16%{transform:rotate(-12deg)}18%{transform:rotate(12deg)}20%{transform:rotate(0deg)}}.faa-ring.animated,.faa-ring.animated-hover:hover{-moz-animation:ring 2s ease infinite;-moz-transform-origin-x:50%;-moz-transform-origin-y:0;-moz-transform-origin-z:initial;-webkit-animation:ring 2s ease infinite;-webkit-transform-origin-x:50%;-webkit-transform-origin-y:0;-webkit-transform-origin-z:initial;-ms-animation:ring 2s ease infinite;-ms-transform-origin-x:50%;-ms-transform-origin-y:0;-ms-transform-origin-z:initial;animation:ring 2s ease infinite;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}@-moz-keyframes vertical{0%{-moz-transform:translate(0,-3px)}4%{-moz-transform:translate(0,3px)}8%{-moz-transform:translate(0,-3px)}12%{-moz-transform:translate(0,3px)}16%{-moz-transform:translate(0,-3px)}20%{-moz-transform:translate(0,3px)}22%{-moz-transform:translate(0,0)}}@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px)}22%{-webkit-transform:translate(0,0)}}@-ms-keyframes vertical{0%{-ms-transform:translate(0,-3px)}4%{-ms-transform:translate(0,3px)}8%{-ms-transform:translate(0,-3px)}12%{-ms-transform:translate(0,3px)}16%{-ms-transform:translate(0,-3px)}20%{-ms-transform:translate(0,3px)}22%{-ms-transform:translate(0,0)}}@keyframes vertical{0%{transform:translate(0,-3px)}4%{transform:translate(0,3px)}8%{transform:translate(0,-3px)}12%{transform:translate(0,3px)}16%{transform:translate(0,-3px)}20%{transform:translate(0,3px)}22%{transform:translate(0,0)}}.faa-vertical.animated,.faa-vertical.animated-hover:hover{-moz-animation:vertical 2s ease infinite;-webkit-animation:vertical 2s ease infinite;-ms-animation:vertical 2s ease infinite;animation:vertical 2s ease infinite}@-moz-keyframes horizontal{0%{-moz-transform:translate(0,0)}6%{-moz-transform:translate(5px,0)}12%{-moz-transform:translate(0,0)}18%{-moz-transform:translate(5px,0)}24%{-moz-transform:translate(0,0)}30%{-moz-transform:translate(5px,0)}36%{-moz-transform:translate(0,0)}}@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0)}6%{-webkit-transform:translate(5px,0)}12%{-webkit-transform:translate(0,0)}18%{-webkit-transform:translate(5px,0)}24%{-webkit-transform:translate(0,0)}30%{-webkit-transform:translate(5px,0)}36%{-webkit-transform:translate(0,0)}}@-ms-keyframes horizontal{0%{-ms-transform:translate(0,0)}6%{-ms-transform:translate(5px,0)}12%{-ms-transform:translate(0,0)}18%{-ms-transform:translate(5px,0)}24%{-ms-transform:translate(0,0)}30%{-ms-transform:translate(5px,0)}36%{-ms-transform:translate(0,0)}}@keyframes horizontal{0%{transform:translate(0,0)}6%{transform:translate(5px,0)}12%{transform:translate(0,0)}18%{transform:translate(5px,0)}24%{transform:translate(0,0)}30%{transform:translate(5px,0)}36%{transform:translate(0,0)}}.faa-horizontal.animated,.faa-horizontal.animated-hover:hover{-moz-animation:horizontal 2s ease infinite;-webkit-animation:horizontal 2s ease infinite;-ms-animation:horizontal 2s ease infinite;animation:horizontal 2s ease infinite}@-moz-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-ms-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.faa-flash.animated,.faa-flash.animated-hover:hover{-moz-animation:flash 2s ease infinite;-webkit-animation:flash 2s ease infinite;-ms-animation:flash 2s ease infinite;animation:flash 2s ease infinite}@-moz-keyframes bounce{0%,100%,20%,50%,80%{-moz-transform:translateY(0)}40%,60%{-moz-transform:translateY(-15px)}}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0)}40%,60%{-webkit-transform:translateY(-15px)}}@-ms-keyframes bounce{0%,100%,20%,50%,80%{-ms-transform:translateY(0)}40%,60%{-ms-transform:translateY(-15px)}}@keyframes bounce{0%,10%,20%,50%,80%{transform:translateY(0)}40%,60%{transform:translateY(-15px)}}.faa-bounce.animated,.faa-bounce.animated-hover:hover{-moz-animation:bounce 2s ease infinite;-webkit-animation:bounce 2s ease infinite;-ms-animation:bounce 2s ease infinite;animation:bounce 2s ease infinite} \ No newline at end of file diff --git a/src/font-awesome-animation.css b/src/font-awesome-animation.css index 2a96549..4dbf108 100644 --- a/src/font-awesome-animation.css +++ b/src/font-awesome-animation.css @@ -1,5 +1,5 @@ /* WRENCHING */ -@-moz-keyframes wrenching { +@-moz-keyframes wrench { 0%{-moz-transform:rotate(-12deg)} 8%{-moz-transform:rotate(12deg)} 10%{-moz-transform:rotate(24deg)} @@ -16,7 +16,7 @@ 68%{-moz-transform:rotate(24deg)} 75%{-moz-transform:rotate(0deg)} } -@-webkit-keyframes wrenching { +@-webkit-keyframes wrench { 0%{-webkit-transform:rotate(-12deg)} 8%{-webkit-transform:rotate(12deg)} 10%{-webkit-transform:rotate(24deg)} @@ -33,7 +33,7 @@ 68%{-webkit-transform:rotate(24deg)} 75%{-webkit-transform:rotate(0deg)} } -@-o-keyframes wrenching { +@-o-keyframes wrench { 0%{-o-transform:rotate(-12deg)} 8%{-o-transform:rotate(12deg)} 10%{-o-transform:rotate(24deg)} @@ -50,7 +50,7 @@ 68%{-o-transform:rotate(24deg)} 75%{-o-transform:rotate(0deg)} } -@-ms-keyframes wrenching { +@-ms-keyframes wrench { 0%{-ms-transform:rotate(-12deg)} 8%{-ms-transform:rotate(12deg)} 10%{-ms-transform:rotate(24deg)} @@ -67,7 +67,7 @@ 68%{-ms-transform:rotate(24deg)} 75%{-ms-transform:rotate(0deg)} } -@keyframes wrenching { +@keyframes wrench { 0%{transform:rotate(-12deg)} 8%{transform:rotate(12deg)} 10%{transform:rotate(24deg)} @@ -84,31 +84,30 @@ 68%{transform:rotate(24deg)} 75%{transform:rotate(0deg)} } -.wrenching-animation.animation, .wrenching-animation.animation-hover:hover { - display: inline-block; - -moz-animation: wrenching 2.5s ease 4; +.faa-wrench.animated, .faa-wrench.animated-hover:hover { + -moz-animation: wrench 2.5s ease infinite; -moz-transform-origin-x: 90%; -moz-transform-origin-y: 35%; -moz-transform-origin-z: initial; - -webkit-animation: wrenching 2.5s ease 4; + -webkit-animation: wrench 2.5s ease infinite; -webkit-transform-origin-x: 90%; -webkit-transform-origin-y: 35%; -webkit-transform-origin-z: initial; - -ms-animation: wrenching 2.5s ease 4; + -ms-animation: wrench 2.5s ease infinite; -ms-transform-origin-x: 90%; -ms-transform-origin-y: 35%; -ms-transform-origin-z: initial; - animation: wrenching 2.5s ease 4; + animation: wrench 2.5s ease infinite; transform-origin-x: 90%; transform-origin-y: 35%; transform-origin-z: initial; } /* BELL */ -@-moz-keyframes ringing { +@-moz-keyframes ring { 0%{-moz-transform:rotate(-15deg)} 2%{-moz-transform:rotate(15deg)} 4%{-moz-transform:rotate(-18deg)} @@ -121,7 +120,7 @@ 18%{-moz-transform:rotate(12deg)} 20%{-moz-transform:rotate(0deg)} } -@-webkit-keyframes ringing { +@-webkit-keyframes ring { 0%{-webkit-transform:rotate(-15deg)} 2%{-webkit-transform:rotate(15deg)} 4%{-webkit-transform:rotate(-18deg)} @@ -134,7 +133,7 @@ 18%{-webkit-transform:rotate(12deg)} 20%{-webkit-transform:rotate(0deg)} } -@-ms-keyframes ringing { +@-ms-keyframes ring { 0%{-ms-transform:rotate(-15deg)} 2%{-ms-transform:rotate(15deg)} 4%{-ms-transform:rotate(-18deg)} @@ -147,7 +146,7 @@ 18%{-ms-transform:rotate(12deg)} 20%{-ms-transform:rotate(0deg)} } -@keyframes ringing { +@keyframes ring { 0%{transform:rotate(-15deg)} 2%{transform:rotate(15deg)} 4%{transform:rotate(-18deg)} @@ -160,24 +159,23 @@ 18%{transform:rotate(12deg)} 20%{transform:rotate(0deg)} } -.ringing-animation.animation, .ringing-animation.animation-hover:hover { - display: inline-block; - -moz-animation: ringing 2s ease 5; +.faa-ring.animated, .faa-ring.animated-hover:hover { + -moz-animation: ring 2s ease infinite; -moz-transform-origin-x: 50%; -moz-transform-origin-y: 0px; -moz-transform-origin-z: initial; - -webkit-animation: ringing 2s ease 5; + -webkit-animation: ring 2s ease infinite; -webkit-transform-origin-x: 50%; -webkit-transform-origin-y: 0px; -webkit-transform-origin-z: initial; - -ms-animation: ringing 2s ease 5; + -ms-animation: ring 2s ease infinite; -ms-transform-origin-x: 50%; -ms-transform-origin-y: 0px; -ms-transform-origin-z: initial; - animation: ringing 2s ease 5; + animation: ring 2s ease infinite; transform-origin-x: 50%; transform-origin-y: 0px; transform-origin-z: initial; @@ -220,12 +218,11 @@ 20%{transform:translate(0,3px)} 22%{transform:translate(0,0)} } -.vertical-animation.animation, .vertical-animation.animation-hover:hover { - display: inline-block; - -moz-animation: vertical 2s ease 5; - -webkit-animation: vertical 2s ease 5; - -ms-animation: vertical 2s ease 5; - animation: vertical 2s ease 5; +.faa-vertical.animated, .faa-vertical.animated-hover:hover { + -moz-animation: vertical 2s ease infinite; + -webkit-animation: vertical 2s ease infinite; + -ms-animation: vertical 2s ease infinite; + animation: vertical 2s ease infinite; } /* HORIZONTAL */ @@ -265,12 +262,11 @@ 30%{transform:translate(5px,0)} 36%{transform:translate(0,0)} } -.horizontal-animation.animation, .horizontal-animation.animation-hover:hover { - display:inline-block; - -moz-animation: horizontal 2s ease 5; - -webkit-animation: horizontal 2s ease 5; - -ms-animation: horizontal 2s ease 5; - animation: horizontal 2s ease 5; +.faa-horizontal.animated, .faa-horizontal.animated-hover:hover { + -moz-animation: horizontal 2s ease infinite; + -webkit-animation: horizontal 2s ease infinite; + -ms-animation: horizontal 2s ease infinite; + animation: horizontal 2s ease infinite; } /* FLASHING */ @@ -290,10 +286,37 @@ 0%,100%,50%{opacity:1} 25%,75%{opacity:0} } -.flash-animation.animation, .flash-animation.animation-hover:hover { - display:inline-block; - -moz-animation: flash 2s ease 5; - -webkit-animation: flash 2s ease 5; - -ms-animation: flash 2s ease 5; - animation: flash 2s ease 5; +.faa-flash.animated, .faa-flash.animated-hover:hover { + -moz-animation: flash 2s ease infinite; + -webkit-animation: flash 2s ease infinite; + -ms-animation: flash 2s ease infinite; + animation: flash 2s ease infinite; +} + +/* BOUNCE */ +@-moz-keyframes bounce { + 0%,100%,20%,50%,80%{-moz-transform:translateY(0)} + 40%{-moz-transform:translateY(-15px)} + 60%{-moz-transform:translateY(-15px)} +} +@-webkit-keyframes bounce { + 0%,100%,20%,50%,80%{-webkit-transform:translateY(0)} + 40%{-webkit-transform:translateY(-15px)} + 60%{-webkit-transform:translateY(-15px)} +} +@-ms-keyframes bounce { + 0%,100%,20%,50%,80%{-ms-transform:translateY(0)} + 40%{-ms-transform:translateY(-15px)} + 60%{-ms-transform:translateY(-15px)} +} +@keyframes bounce { + 0%,10%,20%,50%,80%{transform:translateY(0)} + 40%{transform:translateY(-15px)} + 60%{transform:translateY(-15px)} +} +.faa-bounce.animated, .faa-bounce.animated-hover:hover { + -moz-animation: bounce 2s ease infinite; + -webkit-animation: bounce 2s ease infinite; + -ms-animation: bounce 2s ease infinite; + animation: bounce 2s ease infinite; } \ No newline at end of file