From 2ed195b4521c3bb7bb589b592bfe8b1188fb485d Mon Sep 17 00:00:00 2001 From: IanLunn Date: Wed, 8 Oct 2014 16:04:36 +0100 Subject: [PATCH] Merge with 'colby-fayock' --- bower.json | 2 +- css/hover-min.css | 4 +- css/hover.css | 268 +++++++++++++++++++++++++++++++++++----------- package.json | 2 +- scss/hover.scss | 2 +- 5 files changed, 210 insertions(+), 68 deletions(-) diff --git a/bower.json b/bower.json index 79def79..a8f49bf 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "Hover.css", - "version": "1.0.8", + "version": "1.0.9", "homepage": "http://ianlunn.github.io/Hover", "authors": [ "Ian Lunn " diff --git a/css/hover-min.css b/css/hover-min.css index bc464ce..338eb16 100644 --- a/css/hover-min.css +++ b/css/hover-min.css @@ -1,6 +1,6 @@ /*! * Hover.css (http://ianlunn.co.uk/) - * Version: 1.0.8 + * Version: 1.0.9 * Author: Ian Lunn @IanLunn * Author URL: http://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover @@ -9,4 +9,4 @@ * http://www.opensource.org/licenses/mit-license.php * Hover.css Copyright Ian Lunn 2014. - */.button{margin:.4em;padding:1em;cursor:pointer;background:#e1e1e1;text-decoration:none;color:#666;-webkit-tap-highlight-color:transparent}.grow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.grow:active,.grow:focus,.grow:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.shrink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.shrink:active,.shrink:focus,.shrink:hover{-webkit-transform:scale(0.9);transform:scale(0.9)}@-webkit-keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}.pulse{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.pulse:active,.pulse:focus,.pulse:hover{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}.pulse-grow{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.pulse-grow:active,.pulse-grow:focus,.pulse-grow:hover{-webkit-animation-name:pulse-grow;animation-name:pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}.pulse-shrink{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.pulse-shrink:active,.pulse-shrink:focus,.pulse-shrink:hover{-webkit-animation-name:pulse-shrink;animation-name:pulse-shrink;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}.push{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.push:active,.push:focus,.push:hover{-webkit-animation-name:push;animation-name:push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}.pop{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.pop:active,.pop:focus,.pop:hover{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.rotate:active,.rotate:focus,.rotate:hover{-webkit-transform:rotate(4deg);transform:rotate(4deg)}.grow-rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.grow-rotate:active,.grow-rotate:focus,.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg)}.float{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.float:active,.float:focus,.float:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.sink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.sink:active,.sink:focus,.sink:hover{-webkit-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}.hover{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.hover:active,.hover:focus,.hover:hover{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}@keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}.hang{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.hang:active,.hang:focus,.hang:hover{-webkit-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hang;animation-name:hang;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.skew{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.skew:active,.skew:focus,.skew:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}.skew-forward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.skew-forward:active,.skew-forward:focus,.skew-forward:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}.skew-backward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.skew-backward:active,.skew-backward:focus,.skew-backward:hover{-webkit-transform:skew(10deg);transform:skew(10deg)}@-webkit-keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.wobble-vertical{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.wobble-vertical:active,.wobble-vertical:focus,.wobble-vertical:hover{-webkit-animation-name:wobble-vertical;animation-name:wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.wobble-horizontal{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.wobble-horizontal:active,.wobble-horizontal:focus,.wobble-horizontal:hover{-webkit-animation-name:wobble-horizontal;animation-name:wobble-horizontal;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-to-bottom-right{16.65%{-webkit-transform:translate(8px,8px);transform:translate(8px,8px)}33.3%{-webkit-transform:translate(-6px,-6px);transform:translate(-6px,-6px)}49.95%{-webkit-transform:translate(4px,4px);transform:translate(4px,4px)}66.6%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}83.25%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes wobble-to-bottom-right{16.65%{-webkit-transform:translate(8px,8px);transform:translate(8px,8px)}33.3%{-webkit-transform:translate(-6px,-6px);transform:translate(-6px,-6px)}49.95%{-webkit-transform:translate(4px,4px);transform:translate(4px,4px)}66.6%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}83.25%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.wobble-to-bottom-right{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.wobble-to-bottom-right:active,.wobble-to-bottom-right:focus,.wobble-to-bottom-right:hover{-webkit-animation-name:wobble-to-bottom-right;animation-name:wobble-to-bottom-right;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-to-top-right{16.65%{-webkit-transform:translate(8px,-8px);transform:translate(8px,-8px)}33.3%{-webkit-transform:translate(-6px,6px);transform:translate(-6px,6px)}49.95%{-webkit-transform:translate(4px,-4px);transform:translate(4px,-4px)}66.6%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}83.25%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes wobble-to-top-right{16.65%{-webkit-transform:translate(8px,-8px);transform:translate(8px,-8px)}33.3%{-webkit-transform:translate(-6px,6px);transform:translate(-6px,6px)}49.95%{-webkit-transform:translate(4px,-4px);transform:translate(4px,-4px)}66.6%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}83.25%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.wobble-to-top-right{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.wobble-to-top-right:active,.wobble-to-top-right:focus,.wobble-to-top-right:hover{-webkit-animation-name:wobble-to-top-right;animation-name:wobble-to-top-right;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-top{display:inline-block;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.wobble-top:active,.wobble-top:focus,.wobble-top:hover{-webkit-animation-name:wobble-top;animation-name:wobble-top;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-bottom{display:inline-block;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.wobble-bottom:active,.wobble-bottom:focus,.wobble-bottom:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-skew{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-skew{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-skew{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.wobble-skew:active,.wobble-skew:focus,.wobble-skew:hover{-webkit-animation-name:wobble-skew;animation-name:wobble-skew;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes buzz{50%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}100%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}}@keyframes buzz{50%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}100%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}}.buzz{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.buzz:active,.buzz:focus,.buzz:hover{-webkit-animation-name:buzz;animation-name:buzz;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}@keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}.buzz-out{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.buzz-out:active,.buzz-out:focus,.buzz-out:hover{-webkit-animation-name:buzz-out;animation-name:buzz-out;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.border-fade{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #e1e1e1,0 0 1px transparent}.border-fade:active,.border-fade:focus,.border-fade:hover{box-shadow:inset 0 0 0 4px #666,0 0 1px transparent}.hollow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background;transition-property:background;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #e1e1e1,0 0 1px transparent}.hollow:active,.hollow:focus,.hollow:hover{background:0 0}.trim{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.trim:before{content:'';position:absolute;border:#fff solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.trim:active:before,.trim:focus:before,.trim:hover:before{opacity:1}.outline-outward{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.outline-outward:before{content:'';position:absolute;border:#e1e1e1 solid 4px;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left}.outline-outward:active:before,.outline-outward:focus:before,.outline-outward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px}.outline-inward{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.outline-inward:before{pointer-events:none;content:'';position:absolute;border:#e1e1e1 solid 4px;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left}.outline-inward:active:before,.outline-inward:focus:before,.outline-inward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1}.round-corners{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:border-radius;transition-property:border-radius;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.round-corners:active,.round-corners:focus,.round-corners:hover{border-radius:1em}.glow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.glow:active,.glow:focus,.glow:hover{box-shadow:0 0 8px rgba(0,0,0,.6)}.box-shadow-outset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.box-shadow-outset:active,.box-shadow-outset:focus,.box-shadow-outset:hover{box-shadow:2px 2px 2px rgba(0,0,0,.6)}.box-shadow-inset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;box-shadow:inset 0 0 0 rgba(0,0,0,.6),0 0 1px transparent;-webkit-transform:translateZ(0);transform:translateZ(0)}.box-shadow-inset:active,.box-shadow-inset:focus,.box-shadow-inset:hover{box-shadow:inset 2px 2px 2px rgba(0,0,0,.6),0 0 1px transparent}.float-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,transparent 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}.float-shadow:active,.float-shadow:focus,.float-shadow:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.float-shadow:active:before,.float-shadow:focus:before,.float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@-webkit-keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}@keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}.hover-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.hover-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,transparent 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}.hover-shadow:active,.hover-shadow:focus,.hover-shadow:hover{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.hover-shadow:active:before,.hover-shadow:focus:before,.hover-shadow:hover:before{opacity:.4;-webkit-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hover-shadow;animation-name:hover-shadow;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.shadow-radial{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.shadow-radial:after,.shadow-radial:before{pointer-events:none;position:absolute;content:'';left:0;width:100%;box-sizing:border-box;height:5px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.shadow-radial:before{bottom:100%;background:radial-gradient(ellipse at 50% 150%,rgba(0,0,0,.6) 0,transparent 80%)}.shadow-radial:after{top:100%;background:radial-gradient(ellipse at 50% -50%,rgba(0,0,0,.6) 0,transparent 80%)}.shadow-radial:active:after,.shadow-radial:active:before,.shadow-radial:focus:after,.shadow-radial:focus:before,.shadow-radial:hover:after,.shadow-radial:hover:before{opacity:1}.bubble-top{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top;left:calc(50% - 10px);top:0;border-width:0 10px 10px;border-color:transparent transparent #e1e1e1}.bubble-top:active:before,.bubble-top:focus:before,.bubble-top:hover:before{top:-10px}.bubble-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-right:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right;top:calc(50% - 10px);right:0;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e1e1e1}.bubble-right:active:before,.bubble-right:focus:before,.bubble-right:hover:before{right:-10px}.bubble-bottom{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom;left:calc(50% - 10px);bottom:0;border-width:10px 10px 0;border-color:#e1e1e1 transparent transparent}.bubble-bottom:active:before,.bubble-bottom:focus:before,.bubble-bottom:hover:before{bottom:-10px}.bubble-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left;top:calc(50% - 10px);left:0;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent}.bubble-left:active:before,.bubble-left:focus:before,.bubble-left:hover:before{left:-10px}.bubble-float-top{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-float-top:before{position:absolute;z-index:-1;content:'';left:calc(50% - 10px);top:0;border-style:solid;border-width:0 10px 10px;border-color:transparent transparent #e1e1e1;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top}.bubble-float-top:active,.bubble-float-top:focus,.bubble-float-top:hover{-webkit-transform:translateY(5px) translateZ(0);transform:translateY(5px) translateZ(0)}.bubble-float-top:active:before,.bubble-float-top:focus:before,.bubble-float-top:hover:before{top:-10px}.bubble-float-right{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-float-right:before{position:absolute;z-index:-1;top:calc(50% - 10px);right:0;content:'';border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e1e1e1;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right}.bubble-float-right:active,.bubble-float-right:focus,.bubble-float-right:hover{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.bubble-float-right:active:before,.bubble-float-right:focus:before,.bubble-float-right:hover:before{right:-10px}.bubble-float-bottom{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-float-bottom:before{position:absolute;z-index:-1;content:'';left:calc(50% - 10px);bottom:0;border-style:solid;border-width:10px 10px 0;border-color:#e1e1e1 transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom}.bubble-float-bottom:active,.bubble-float-bottom:focus,.bubble-float-bottom:hover{-webkit-transform:translateY(-5px) translateZ(0);transform:translateY(-5px) translateZ(0)}.bubble-float-bottom:active:before,.bubble-float-bottom:focus:before,.bubble-float-bottom:hover:before{bottom:-10px}.bubble-float-left{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.bubble-float-left:before{position:absolute;z-index:-1;content:'';top:calc(50% - 10px);left:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left}.bubble-float-left:active,.bubble-float-left:focus,.bubble-float-left:hover{-webkit-transform:translateX(5px);transform:translateX(5px)}.bubble-float-left:active:before,.bubble-float-left:focus:before,.bubble-float-left:hover:before{left:-10px}.curl-top-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.curl-top-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;left:0;background:#fff;background:linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');z-index:1000;box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-top-left:active:before,.curl-top-left:focus:before,.curl-top-left:hover:before{width:25px;height:25px}.curl-top-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.curl-top-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;right:0;background:#fff;background:linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-top-right:active:before,.curl-top-right:focus:before,.curl-top-right:hover:before{width:25px;height:25px}.curl-bottom-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.curl-bottom-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;right:0;background:#fff;background:linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-bottom-right:active:before,.curl-bottom-right:focus:before,.curl-bottom-right:hover:before{width:25px;height:25px}.curl-bottom-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent}.curl-bottom-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;left:0;background:#fff;background:linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-bottom-left:active:before,.curl-bottom-left:focus:before,.curl-bottom-left:hover:before{width:25px;height:25px} \ No newline at end of file + */.button{margin:.4em;padding:1em;cursor:pointer;background:#e1e1e1;text-decoration:none;color:#666;-webkit-tap-highlight-color:rgba(0,0,0,0)}.grow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow:active,.grow:focus,.grow:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.shrink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shrink:active,.shrink:focus,.shrink:hover{-webkit-transform:scale(0.9);transform:scale(0.9)}@-webkit-keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}.pulse{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse:active,.pulse:focus,.pulse:hover{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}.pulse-grow{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-grow:active,.pulse-grow:focus,.pulse-grow:hover{-webkit-animation-name:pulse-grow;animation-name:pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}.pulse-shrink{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-shrink:active,.pulse-shrink:focus,.pulse-shrink:hover{-webkit-animation-name:pulse-shrink;animation-name:pulse-shrink;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}.push{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.push:active,.push:focus,.push:hover{-webkit-animation-name:push;animation-name:push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}.pop{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pop:active,.pop:focus,.pop:hover{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.rotate:active,.rotate:focus,.rotate:hover{-webkit-transform:rotate(4deg);transform:rotate(4deg)}.grow-rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow-rotate:active,.grow-rotate:focus,.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg)}.float{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float:active,.float:focus,.float:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.sink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.sink:active,.sink:focus,.sink:hover{-webkit-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}.hover{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover:active,.hover:focus,.hover:hover{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}@keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}.hang{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hang:active,.hang:focus,.hang:hover{-webkit-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hang;animation-name:hang;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.skew{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew:active,.skew:focus,.skew:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}.skew-forward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew-forward:active,.skew-forward:focus,.skew-forward:hover{-webkit-transform:skew(-10deg);transform:skew(-10deg)}.skew-backward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew-backward:active,.skew-backward:focus,.skew-backward:hover{-webkit-transform:skew(10deg);transform:skew(10deg)}@-webkit-keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.wobble-vertical{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-vertical:active,.wobble-vertical:focus,.wobble-vertical:hover{-webkit-animation-name:wobble-vertical;animation-name:wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.wobble-horizontal{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-horizontal:active,.wobble-horizontal:focus,.wobble-horizontal:hover{-webkit-animation-name:wobble-horizontal;animation-name:wobble-horizontal;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-to-bottom-right{16.65%{-webkit-transform:translate(8px,8px);transform:translate(8px,8px)}33.3%{-webkit-transform:translate(-6px,-6px);transform:translate(-6px,-6px)}49.95%{-webkit-transform:translate(4px,4px);transform:translate(4px,4px)}66.6%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}83.25%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes wobble-to-bottom-right{16.65%{-webkit-transform:translate(8px,8px);transform:translate(8px,8px)}33.3%{-webkit-transform:translate(-6px,-6px);transform:translate(-6px,-6px)}49.95%{-webkit-transform:translate(4px,4px);transform:translate(4px,4px)}66.6%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}83.25%{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.wobble-to-bottom-right{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-to-bottom-right:active,.wobble-to-bottom-right:focus,.wobble-to-bottom-right:hover{-webkit-animation-name:wobble-to-bottom-right;animation-name:wobble-to-bottom-right;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-to-top-right{16.65%{-webkit-transform:translate(8px,-8px);transform:translate(8px,-8px)}33.3%{-webkit-transform:translate(-6px,6px);transform:translate(-6px,6px)}49.95%{-webkit-transform:translate(4px,-4px);transform:translate(4px,-4px)}66.6%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}83.25%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes wobble-to-top-right{16.65%{-webkit-transform:translate(8px,-8px);transform:translate(8px,-8px)}33.3%{-webkit-transform:translate(-6px,6px);transform:translate(-6px,6px)}49.95%{-webkit-transform:translate(4px,-4px);transform:translate(4px,-4px)}66.6%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}83.25%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.wobble-to-top-right{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-to-top-right:active,.wobble-to-top-right:focus,.wobble-to-top-right:hover{-webkit-animation-name:wobble-to-top-right;animation-name:wobble-to-top-right;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-top{display:inline-block;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-top:active,.wobble-top:focus,.wobble-top:hover{-webkit-animation-name:wobble-top;animation-name:wobble-top;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-bottom{display:inline-block;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-bottom:active,.wobble-bottom:focus,.wobble-bottom:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-skew{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-skew{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}.wobble-skew{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-skew:active,.wobble-skew:focus,.wobble-skew:hover{-webkit-animation-name:wobble-skew;animation-name:wobble-skew;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes buzz{50%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}100%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}}@keyframes buzz{50%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}100%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}}.buzz{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.buzz:active,.buzz:focus,.buzz:hover{-webkit-animation-name:buzz;animation-name:buzz;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}@keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}.buzz-out{display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.buzz-out:active,.buzz-out:focus,.buzz-out:hover{-webkit-animation-name:buzz-out;animation-name:buzz-out;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.border-fade{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #e1e1e1,0 0 1px rgba(0,0,0,0)}.border-fade:active,.border-fade:focus,.border-fade:hover{box-shadow:inset 0 0 0 4px #666,0 0 1px rgba(0,0,0,0)}.hollow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background;transition-property:background;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #e1e1e1,0 0 1px rgba(0,0,0,0)}.hollow:active,.hollow:focus,.hollow:hover{background:0 0}.trim{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.trim:before{content:'';position:absolute;border:#fff solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.trim:active:before,.trim:focus:before,.trim:hover:before{opacity:1}.outline-outward{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-outward:before{content:'';position:absolute;border:#e1e1e1 solid 4px;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left}.outline-outward:active:before,.outline-outward:focus:before,.outline-outward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px}.outline-inward{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-inward:before{pointer-events:none;content:'';position:absolute;border:#e1e1e1 solid 4px;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top,right,bottom,left;transition-property:top,right,bottom,left}.outline-inward:active:before,.outline-inward:focus:before,.outline-inward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1}.round-corners{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:border-radius;transition-property:border-radius;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.round-corners:active,.round-corners:focus,.round-corners:hover{border-radius:1em}.glow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.glow:active,.glow:focus,.glow:hover{box-shadow:0 0 8px rgba(0,0,0,.6)}.box-shadow-outset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.box-shadow-outset:active,.box-shadow-outset:focus,.box-shadow-outset:hover{box-shadow:2px 2px 2px rgba(0,0,0,.6)}.box-shadow-inset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;box-shadow:inset 0 0 0 rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0);-webkit-transform:translateZ(0);transform:translateZ(0)}.box-shadow-inset:active,.box-shadow-inset:focus,.box-shadow-inset:hover{box-shadow:inset 2px 2px 2px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0)}.float-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}.float-shadow:active,.float-shadow:focus,.float-shadow:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.float-shadow:active:before,.float-shadow:focus:before,.float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@-webkit-keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}@keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}.hover-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}.hover-shadow:active,.hover-shadow:focus,.hover-shadow:hover{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.hover-shadow:active:before,.hover-shadow:focus:before,.hover-shadow:hover:before{opacity:.4;-webkit-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hover-shadow;animation-name:hover-shadow;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.shadow-radial{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shadow-radial:after,.shadow-radial:before{pointer-events:none;position:absolute;content:'';left:0;width:100%;box-sizing:border-box;height:5px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.shadow-radial:before{bottom:100%;background:radial-gradient(ellipse at 50% 150%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:after{top:100%;background:radial-gradient(ellipse at 50% -50%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:active:after,.shadow-radial:active:before,.shadow-radial:focus:after,.shadow-radial:focus:before,.shadow-radial:hover:after,.shadow-radial:hover:before{opacity:1}.bubble-top{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top;left:calc(50% - 10px);top:0;border-width:0 10px 10px;border-color:transparent transparent #e1e1e1}.bubble-top:active:before,.bubble-top:focus:before,.bubble-top:hover:before{top:-10px}.bubble-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-right:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right;top:calc(50% - 10px);right:0;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e1e1e1}.bubble-right:active:before,.bubble-right:focus:before,.bubble-right:hover:before{right:-10px}.bubble-bottom{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom;left:calc(50% - 10px);bottom:0;border-width:10px 10px 0;border-color:#e1e1e1 transparent transparent}.bubble-bottom:active:before,.bubble-bottom:focus:before,.bubble-bottom:hover:before{bottom:-10px}.bubble-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left;top:calc(50% - 10px);left:0;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent}.bubble-left:active:before,.bubble-left:focus:before,.bubble-left:hover:before{left:-10px}.bubble-float-top{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-top:before{position:absolute;z-index:-1;content:'';left:calc(50% - 10px);top:0;border-style:solid;border-width:0 10px 10px;border-color:transparent transparent #e1e1e1;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top}.bubble-float-top:active,.bubble-float-top:focus,.bubble-float-top:hover{-webkit-transform:translateY(5px) translateZ(0);transform:translateY(5px) translateZ(0)}.bubble-float-top:active:before,.bubble-float-top:focus:before,.bubble-float-top:hover:before{top:-10px}.bubble-float-right{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-right:before{position:absolute;z-index:-1;top:calc(50% - 10px);right:0;content:'';border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e1e1e1;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right}.bubble-float-right:active,.bubble-float-right:focus,.bubble-float-right:hover{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.bubble-float-right:active:before,.bubble-float-right:focus:before,.bubble-float-right:hover:before{right:-10px}.bubble-float-bottom{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-bottom:before{position:absolute;z-index:-1;content:'';left:calc(50% - 10px);bottom:0;border-style:solid;border-width:10px 10px 0;border-color:#e1e1e1 transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom}.bubble-float-bottom:active,.bubble-float-bottom:focus,.bubble-float-bottom:hover{-webkit-transform:translateY(-5px) translateZ(0);transform:translateY(-5px) translateZ(0)}.bubble-float-bottom:active:before,.bubble-float-bottom:focus:before,.bubble-float-bottom:hover:before{bottom:-10px}.bubble-float-left{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-left:before{position:absolute;z-index:-1;content:'';top:calc(50% - 10px);left:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left}.bubble-float-left:active,.bubble-float-left:focus,.bubble-float-left:hover{-webkit-transform:translateX(5px);transform:translateX(5px)}.bubble-float-left:active:before,.bubble-float-left:focus:before,.bubble-float-left:hover:before{left:-10px}.curl-top-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;left:0;background:#fff;background:linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');z-index:1000;box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-top-left:active:before,.curl-top-left:focus:before,.curl-top-left:hover:before{width:25px;height:25px}.curl-top-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;right:0;background:#fff;background:linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-top-right:active:before,.curl-top-right:focus:before,.curl-top-right:hover:before{width:25px;height:25px}.curl-bottom-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;right:0;background:#fff;background:linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-bottom-right:active:before,.curl-bottom-right:focus:before,.curl-bottom-right:hover:before{width:25px;height:25px}.curl-bottom-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;left:0;background:#fff;background:linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width,height;transition-property:width,height}.curl-bottom-left:active:before,.curl-bottom-left:focus:before,.curl-bottom-left:hover:before{width:25px;height:25px} \ No newline at end of file diff --git a/css/hover.css b/css/hover.css index d58f431..fad20ce 100644 --- a/css/hover.css +++ b/css/hover.css @@ -1,6 +1,6 @@ /*! * Hover.css (http://ianlunn.co.uk/) - * Version: 1.0.8 + * Version: 1.0.9 * Author: Ian Lunn @IanLunn * Author URL: http://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover @@ -17,8 +17,8 @@ cursor: pointer; background: #e1e1e1; text-decoration: none; - color: #666; - -webkit-tap-highlight-color: transparent; + color: #666666; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 2D TRANSITIONS */ @@ -31,7 +31,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .grow:hover, .grow:focus, .grow:active { -webkit-transform: scale(1.1); @@ -47,7 +47,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .shrink:hover, .shrink:focus, .shrink:active { -webkit-transform: scale(0.9); @@ -60,26 +60,30 @@ -webkit-transform: scale(1.1); transform: scale(1.1); } + 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } + @keyframes pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } + 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } + .pulse { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse:hover, .pulse:focus, .pulse:active { -webkit-animation-name: pulse; @@ -99,17 +103,19 @@ transform: scale(1.1); } } + @keyframes pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } + .pulse-grow { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active { -webkit-animation-name: pulse-grow; @@ -131,17 +137,19 @@ transform: scale(0.9); } } + @keyframes pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } + .pulse-shrink { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active { -webkit-animation-name: pulse-shrink; @@ -162,26 +170,30 @@ -webkit-transform: scale(0.8); transform: scale(0.8); } + 100% { -webkit-transform: scale(1); transform: scale(1); } } + @keyframes push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } + 100% { -webkit-transform: scale(1); transform: scale(1); } } + .push { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .push:hover, .push:focus, .push:active { -webkit-animation-name: push; @@ -200,26 +212,30 @@ -webkit-transform: scale(1.2); transform: scale(1.2); } + 100% { -webkit-transform: scale(1); transform: scale(1); } } + @keyframes pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } + 100% { -webkit-transform: scale(1); transform: scale(1); } } + .pop { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pop:hover, .pop:focus, .pop:active { -webkit-animation-name: pop; @@ -241,7 +257,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .rotate:hover, .rotate:focus, .rotate:active { -webkit-transform: rotate(4deg); @@ -257,7 +273,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active { -webkit-transform: scale(1.1) rotate(4deg); @@ -273,7 +289,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float:hover, .float:focus, .float:active { -webkit-transform: translateY(-5px); @@ -289,7 +305,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .sink:hover, .sink:focus, .sink:active { -webkit-transform: translateY(5px); @@ -302,21 +318,25 @@ -webkit-transform: translateY(-3px); transform: translateY(-3px); } + 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } + @keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } + 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } + .hover { display: inline-block; -webkit-transition-duration: 0.5s; @@ -325,7 +345,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hover:hover, .hover:focus, .hover:active { -webkit-transform: translateY(-6px); @@ -350,21 +370,25 @@ -webkit-transform: translateY(3px); transform: translateY(3px); } + 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } + @keyframes hang { 50% { -webkit-transform: translateY(3px); transform: translateY(3px); } + 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } + .hang { display: inline-block; -webkit-transition-duration: 0.5s; @@ -373,7 +397,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hang:hover, .hang:focus, .hang:active { -webkit-transform: translateY(6px); @@ -401,7 +425,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .skew:hover, .skew:focus, .skew:active { -webkit-transform: skew(-10deg); @@ -419,7 +443,7 @@ transform-origin: 0 100%; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .skew-forward:hover, .skew-forward:focus, .skew-forward:active { -webkit-transform: skew(-10deg); @@ -437,7 +461,7 @@ transform-origin: 0 100%; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .skew-backward:hover, .skew-backward:focus, .skew-backward:active { -webkit-transform: skew(10deg); @@ -450,58 +474,70 @@ -webkit-transform: translateY(8px); transform: translateY(8px); } + 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } + 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } + 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } + 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } + 100% { -webkit-transform: translateY(0); transform: translateY(0); } } + @keyframes wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } + 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } + 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } + 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } + 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } + 100% { -webkit-transform: translateY(0); transform: translateY(0); } } + .wobble-vertical { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active { -webkit-animation-name: wobble-vertical; @@ -520,58 +556,70 @@ -webkit-transform: translateX(8px); transform: translateX(8px); } + 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } + 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } + 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } + 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } + 100% { -webkit-transform: translateX(0); transform: translateX(0); } } + @keyframes wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } + 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } + 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } + 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } + 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } + 100% { -webkit-transform: translateX(0); transform: translateX(0); } } + .wobble-horizontal { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active { -webkit-animation-name: wobble-horizontal; @@ -590,58 +638,70 @@ -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } + 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } + 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } + 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } + 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } + 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } + @keyframes wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } + 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } + 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } + 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } + 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } + 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } + .wobble-to-bottom-right { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus, .wobble-to-bottom-right:active { -webkit-animation-name: wobble-to-bottom-right; @@ -660,58 +720,70 @@ -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } + 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } + 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } + 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } + 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } + 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } + @keyframes wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } + 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } + 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } + 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } + 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } + 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } + .wobble-to-top-right { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-to-top-right:hover, .wobble-to-top-right:focus, .wobble-to-top-right:active { -webkit-animation-name: wobble-to-top-right; @@ -730,60 +802,72 @@ -webkit-transform: skew(-12deg); transform: skew(-12deg); } + 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } + 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } + 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } + 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } + 100% { -webkit-transform: skew(0); transform: skew(0); } } + @keyframes wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } + 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } + 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } + 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } + 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } + 100% { -webkit-transform: skew(0); transform: skew(0); } } + .wobble-top { display: inline-block; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-top:hover, .wobble-top:focus, .wobble-top:active { -webkit-animation-name: wobble-top; @@ -802,60 +886,72 @@ -webkit-transform: skew(-12deg); transform: skew(-12deg); } + 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } + 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } + 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } + 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } + 100% { -webkit-transform: skew(0); transform: skew(0); } } + @keyframes wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } + 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } + 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } + 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } + 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } + 100% { -webkit-transform: skew(0); transform: skew(0); } } + .wobble-bottom { display: inline-block; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active { -webkit-animation-name: wobble-bottom; @@ -874,58 +970,70 @@ -webkit-transform: skew(-12deg); transform: skew(-12deg); } + 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } + 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } + 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } + 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } + 100% { -webkit-transform: skew(0); transform: skew(0); } } + @keyframes wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } + 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } + 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } + 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } + 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } + 100% { -webkit-transform: skew(0); transform: skew(0); } } + .wobble-skew { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active { -webkit-animation-name: wobble-skew; @@ -944,26 +1052,30 @@ -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } + 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } + @keyframes buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } + 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } + .buzz { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .buzz:hover, .buzz:focus, .buzz:active { -webkit-animation-name: buzz; @@ -982,90 +1094,110 @@ -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } + 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } + 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } + 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } + 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } + 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } + 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } + 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } + 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } + 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } + @keyframes buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } + 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } + 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } + 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } + 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } + 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } + 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } + 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } + 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } + 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } + .buzz-out { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .buzz-out:hover, .buzz-out:focus, .buzz-out:active { -webkit-animation-name: buzz-out; @@ -1088,11 +1220,11 @@ transition-property: box-shadow; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px transparent; + box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .border-fade:hover, .border-fade:focus, .border-fade:active { - box-shadow: inset 0 0 0 4px #666, 0 0 1px transparent; + box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } @@ -1105,7 +1237,7 @@ transition-property: background; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px transparent; + box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hollow:hover, .hollow:focus, .hollow:active { @@ -1118,7 +1250,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .trim:before { content: ''; @@ -1144,7 +1276,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .outline-outward:before { content: ''; @@ -1172,7 +1304,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .outline-inward:before { pointer-events: none; @@ -1206,7 +1338,7 @@ transition-property: border-radius; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .round-corners:hover, .round-corners:focus, .round-corners:active { border-radius: 1em; @@ -1222,7 +1354,7 @@ transition-property: box-shadow; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .glow:hover, .glow:focus, .glow:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); @@ -1237,7 +1369,7 @@ transition-property: box-shadow; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .box-shadow-outset:hover, .box-shadow-outset:focus, .box-shadow-outset:active { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); @@ -1250,13 +1382,13 @@ transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; - box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px transparent; + box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ -webkit-transform: translateZ(0); transform: translateZ(0); } .box-shadow-inset:hover, .box-shadow-inset:focus, .box-shadow-inset:active { - box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px transparent; + box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } @@ -1270,7 +1402,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float-shadow:before { pointer-events: none; @@ -1282,7 +1414,7 @@ height: 10px; width: 90%; opacity: 0; - background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; @@ -1307,55 +1439,65 @@ -webkit-transform: translateY(-3px); transform: translateY(-3px); } + 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } + @keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } + 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } + @-webkit-keyframes hover-shadow { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; } + 50% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity: 1; } + 100% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; } } + @keyframes hover-shadow { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; } + 50% { -webkit-transform: translateY(3px); transform: translateY(3px); opacity: 1; } + 100% { -webkit-transform: translateY(6px); transform: translateY(6px); opacity: .4; } } + .hover-shadow { display: inline-block; position: relative; @@ -1365,7 +1507,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hover-shadow:before { pointer-events: none; @@ -1377,7 +1519,7 @@ height: 10px; width: 90%; opacity: 0; - background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; @@ -1424,7 +1566,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .shadow-radial:before, .shadow-radial:after { pointer-events: none; @@ -1443,11 +1585,11 @@ } .shadow-radial:before { bottom: 100%; - background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, transparent 80%); + background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .shadow-radial:after { top: 100%; - background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, transparent 80%); + background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .shadow-radial:hover:before, .shadow-radial:focus:before, .shadow-radial:active:before, .shadow-radial:hover:after, .shadow-radial:focus:after, .shadow-radial:active:after { opacity: 1; @@ -1460,7 +1602,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-top:before { pointer-events: none; @@ -1487,7 +1629,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-right:before { pointer-events: none; @@ -1514,7 +1656,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-bottom:before { pointer-events: none; @@ -1541,7 +1683,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-left:before { pointer-events: none; @@ -1572,7 +1714,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-top:before { position: absolute; @@ -1606,7 +1748,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-right:before { position: absolute; @@ -1640,7 +1782,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-bottom:before { position: absolute; @@ -1674,7 +1816,7 @@ transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-left:before { position: absolute; @@ -1705,7 +1847,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-top-left:before { pointer-events: none; @@ -1717,7 +1859,7 @@ left: 0; background: white; /* IE9 */ - background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); /*For IE7-8-9*/ z-index: 1000; @@ -1738,7 +1880,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-top-right:before { pointer-events: none; @@ -1750,7 +1892,7 @@ right: 0; background: white; /* IE9 */ - background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; @@ -1768,7 +1910,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-bottom-right:before { pointer-events: none; @@ -1780,7 +1922,7 @@ right: 0; background: white; /* IE9 */ - background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; @@ -1798,7 +1940,7 @@ position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 1px transparent; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-bottom-left:before { pointer-events: none; @@ -1810,7 +1952,7 @@ left: 0; background: white; /* IE9 */ - background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; @@ -1820,4 +1962,4 @@ .curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before { width: 25px; height: 25px; -} \ No newline at end of file +} diff --git a/package.json b/package.json index 7a48f1a..784d575 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Hover.css", - "version": "1.0.8", + "version": "1.0.9", "author": "Ian Lunn", "devDependencies": { "grunt": "~0.4.1", diff --git a/scss/hover.scss b/scss/hover.scss index bc40888..4f212bf 100644 --- a/scss/hover.scss +++ b/scss/hover.scss @@ -1,6 +1,6 @@ /*! * Hover.css (http://ianlunn.co.uk/) - * Version: 1.0.8 + * Version: 1.0.9 * Author: Ian Lunn @IanLunn * Author URL: http://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover