CSS3悬停特效合集Hover.css

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3悬停特效合集Hover.css 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="gb2312">
		<title>CSS3ʵ����껬��Hover��ͣ��Ч</title>
		<link href="css/demo-page.css" rel="stylesheet" media="all">
		<link href="css/hover.css" rel="stylesheet" media="all">
	</head>
	<body>

		<div id="effects">

			<h2>2D Transforms</h2>

			<a rel="grow" class="button grow">Grow</a>
			<a rel="shrink" class="button shrink">Shrink</a>
			<a rel="pulse" class="button pulse">Pulse</a>
			<a rel="pulse-grow" class="button pulse-grow">Pulse Grow</a>
			<a rel="pulse-shrink" class="button pulse-shrink">Pulse Shrink</a>
			<a rel="push" class="button push">Push</a>
			<a rel="pop" class="button pop">Pop</a>
			<a rel="rotate" class="button rotate">Rotate</a>
			<a rel="grow-rotate" class="button grow-rotate">Grow Rotate</a>
			<a rel="float" class="button float">Float</a>
			<a rel="sink" class="button sink">Sink</a>
			<a rel="hover" class="button hover">Hover</a>
			<a rel="hang" class="button hang">Hang</a>
			<a rel="skew" class="button skew">Skew</a>
			<a rel="skew-forward" class="button skew-forward">Skew Forward</a>
			<a rel="skew-backward" class="button skew-backward">Skew Backward</a>
			<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
			<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
			<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
			<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>
			<a rel="wobble-skew" class="button wobble-skew">Wobble Skew</a>
			<a rel="buzz" class="button buzz">Buzz</a>
			<a rel="buzz-out" class="button buzz-out">Buzz Out</a>



			<h2>Border Transitions</h2>

			<a rel="border-fade" class="button border-fade">Border Fade</a>
			<a rel="hollow" class="button hollow">Hollow</a>
			<a rel="trim" class="button trim">Trim</a>
			<a rel="outline-outward" class="button outline-outward">Outline Outward</a>
			<a rel="outline-inward" class="button outline-inward">Outline Inward</a>
			<a rel="round-corners" class="button round-corners">Round Corners</a>



			<h2>Shadow and Glow Transitions</h2>

			<a rel="glow" class="button glow">Glow</a>
			<a rel="box-shadow-outset" class="button box-shadow-outset">Box Shadow Outset</a>
			<a rel="box-shadow-inset" class="button box-shadow-inset">Box Shadow Inset</a>
			<a rel="float-shadow" class="button float-shadow">Float Shadow</a>
			<a rel="hover-shadow" class="button hover-shadow">Hover Shadow</a>
			<a rel="shadow-radial" class="button shadow-radial">Shadow Radial</a>



			<h2>Speech Bubbles</h2>

			<a rel="bubble-top" class="button bubble-top">Bubble Top</a>
			<a rel="bubble-right" class="button bubble-right">Bubble Right</a>
			<a rel="bubble-bottom" class="button bubble-bottom">Bubble Bottom</a>
			<a rel="bubble-left" class="button bubble-left">Bubble Left</a>
			<a rel="bubble-float-top" class="button bubble-float-top">Bubble Float Top</a>
			<a rel="bubble-float-right" class="button bubble-float-right">Bubble Float Right</a>
			<a rel="bubble-float-bottom" class="button bubble-float-bottom">Bubble Float Bottom</a>
			<a rel="bubble-float-left" class="button bubble-float-left">Bubble Float Left</a>



			<h2>Curls</h2>

			<a rel="curl-top-left" class="button curl-top-left">Curl Top Left</a>
			<a rel="curl-top-right" class="button curl-top-right">Curl Top Right</a>
			<a rel="curl-bottom-right" class="button curl-bottom-right">Curl Bottom Right</a>
			<a rel="curl-bottom-left" class="button curl-bottom-left">Curl Bottom Left</a>

		</div>
	</body>
</html>

CSS代码(hover.css):

/*! * Hover.css (http://ianlunn.co.uk/) * Version:1.0.5 * Author:Ian Lunn @IanLunn * Author URL:http://ianlunn.co.uk/ * Github:https://github.com/IanLunn/Hover * Made available under a MIT License:* http://www.opensource.org/licenses/mit-license.php * Hover.css Copyright Ian Lunn 2014. */
/* Default styles for the demo buttons */
.button{margin:.4em;padding:1em;cursor:pointer;background:#e1e1e1;text-decoration:none;color:#666666;/* Prevent highlight colour when element is tapped */
 -webkit-tap-highlight-color:rgba(0,0,0,0);}
/* 2D TRANSITIONS */
/* Grow */
.grow{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.grow:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
/* Shrink */
.shrink{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.shrink:hover{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}
/* Pulse */
@-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);-ms-transform:scale(1.1);transform:scale(1.1);}
75%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}
}
.pulse{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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;}
/* Pulse Grow */
@-webkit-keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1);}
}
@keyframes pulse-grow{to{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
}
.pulse-grow{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.pulse-grow:hover{-webkit-animation-name:pulse-grow;animation-name:pulse-grow;-webkit-animation-duration:0.3s;animation-duration:0.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;}
/* Pulse Shrink */
@-webkit-keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9);}
}
@keyframes pulse-shrink{to{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}
}
.pulse-shrink{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.pulse-shrink:hover{-webkit-animation-name:pulse-shrink;animation-name:pulse-shrink;-webkit-animation-duration:0.3s;animation-duration:0.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;}
/* Push */
@-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);-ms-transform:scale(0.8);transform:scale(0.8);}
100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
}
.push{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.push:hover{-webkit-animation-name:push;animation-name:push;-webkit-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;}
/* Pop */
@-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);-ms-transform:scale(1.2);transform:scale(1.2);}
100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
}
.pop{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.pop:hover{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;}
/* Rotate */
.rotate{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.rotate:hover{-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg);}
/* Grow Rotate */
.grow-rotate{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);-ms-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg);}
/* Float */
.float{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.float:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px);}
/* Sink */
.sink{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.sink:hover{-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}
/* Hover */
@-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);-ms-transform:translateY(-3px);transform:translateY(-3px);}
100%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);}
}
.hover{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.hover:hover{-webkit-transform:translateY(-6px);-ms-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:0.3s;animation-delay:0.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;}
/* Hang */
@-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);-ms-transform:translateY(3px);transform:translateY(3px);}
100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);}
}
.hang{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.hang:hover{-webkit-transform:translateY(6px);-ms-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:0.3s;animation-delay:0.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 */
.skew{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.skew:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);}
/* Skew Forward */
.skew-forward{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.skew-forward:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);}
/* Skew Backward */
.skew-backward{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.skew-backward:hover{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);}
/* Wobble Vertical */
@-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);-ms-transform:translateY(8px);transform:translateY(8px);}
33.3%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);}
49.95%{-webkit-transform:translateY(4px);-ms-transform:translateY(4px);transform:translateY(4px);}
66.6%{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);}
83.25%{-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px);}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
.wobble-vertical{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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;}
/* Wobble Horizontal */
@-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);-ms-transform:translateX(8px);transform:translateX(8px);}
33.3%{-webkit-transform:translateX(-6px);-ms-transform:translateX(-6px);transform:translateX(-6px);}
49.95%{-webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px);}
66.6%{-webkit-transform:translateX(-2px);-ms-transform:translateX(-2px);transform:translateX(-2px);}
83.25%{-webkit-transform:translateX(1px);-ms-transform:translateX(1px);transform:translateX(1px);}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
}
.wobble-horizontal{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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;}
/* Wobble Top */
@-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);-ms-transform:skew(-12deg);transform:skew(-12deg);}
33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);}
49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg);}
66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg);}
83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg);}
100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0);}
}
.wobble-top{display:inline-block;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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;}
/* Wobble Bottom */
@-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);-ms-transform:skew(-12deg);transform:skew(-12deg);}
33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);}
49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg);}
66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg);}
83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg);}
100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0);}
}
.wobble-bottom{display:inline-block;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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;}
/* Wobble Skew */
@-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);-ms-transform:skew(-12deg);transform:skew(-12deg);}
33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);}
49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg);}
66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg);}
83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg);}
100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0);}
}
.wobble-skew{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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;}
/* Buzz */
@-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);-ms-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}
100%{-webkit-transform:translateX(-3px) rotate(-2deg);-ms-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}
}
.buzz{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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;}
/* Buzz Out */
@-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);-ms-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}
20%{-webkit-transform:translateX(-3px) rotate(-2deg);-ms-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}
30%{-webkit-transform:translateX(3px) rotate(2deg);-ms-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}
40%{-webkit-transform:translateX(-3px) rotate(-2deg);-ms-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}
50%{-webkit-transform:translateX(2px) rotate(1deg);-ms-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}
60%{-webkit-transform:translateX(-2px) rotate(-1deg);-ms-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}
70%{-webkit-transform:translateX(2px) rotate(1deg);-ms-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}
80%{-webkit-transform:translateX(-2px) rotate(-1deg);-ms-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}
90%{-webkit-transform:translateX(1px) rotate(0);-ms-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0);}
100%{-webkit-transform:translateX(-1px) rotate(0);-ms-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0);}
}
.buzz-out{display:inline-block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.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 TRANSITIONS */
/* Border Fade */
.border-fade{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);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{box-shadow:inset 0 0 0 4px #666666,0 0 1px rgba(0,0,0,0);/* Hack to improve aliasing on mobile/tablet devices */
}
/* Hollow */
.hollow{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:background;transition-property:background;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);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{background:none;}
/* Trim */
.trim{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.trim:before{content:'';position:absolute;border:white solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:opacity;transition-property:opacity;}
.trim:hover:before{opacity:1;}
/* Outline Outward */
.outline-outward{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;}
/* Outline Inward */
.outline-inward{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.outline-inward:before{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:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1;}
/* Round Corners */
.round-corners{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:border-radius;transition-property:border-radius;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.round-corners:hover{border-radius:1em;}
/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.glow:hover{box-shadow:0 0 8px rgba(0,0,0,0.6);}
/* Box Shadow Outset */
.box-shadow-outset{display:inline-block;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.box-shadow-outset:hover{box-shadow:2px 2px 2px rgba(0,0,0,0.6);}
/* Box Shadow Inset */
.box-shadow-inset{display:inline-block;-webkit-transition-duration:0.3s;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 rgba(0,0,0,0);/* Hack to improve aliasing on mobile/tablet devices */
 -webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);}
.box-shadow-inset:hover{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 */
}
/* Float Shadow */
.float-shadow{display:inline-block;position:relative;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-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:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 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;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;}
.float-shadow:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px);/* move the element up by 5px */
}
.float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* Hover Shadow */
@keyframes hover{50%{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px);}
100%{-webkit-transform:translateY(-6px);-ms-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);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4;}
50%{-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px);opacity:1;}
100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4;}
}
.hover-shadow{display:inline-block;position:relative;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-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:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 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;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;}
.hover-shadow:hover{-webkit-transform:translateY(-6px);-ms-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:0.3s;animation-delay:0.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:hover:before{opacity:.4;-webkit-transform:translateY(6px);-ms-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 */
.shadow-radial{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.shadow-radial:before,.shadow-radial:after{pointer-events:none;position:absolute;content:'';left:0;width:100%;-moz-box-sizing:border-box;box-sizing:border-box;background-repeat:no-repeat;height:5px;opacity:0;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:opacity;transition-property:opacity;}
.shadow-radial:before{bottom:100%;background:-webkit-radial-gradient(50% 150%,ellipse,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 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:-webkit-radial-gradient(50% -50%,ellipse,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 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:hover:after{opacity:1;}
/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:0.3s;transition-duration:0.3s;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);border-width:0 10px 10px 10px;border-color:transparent transparent #e1e1e1 transparent;-webkit-transition-property:top;transition-property:top;}
.bubble-top:hover:before{top:-10px;}
/* Bubble Right */
.bubble-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:0.3s;transition-duration:0.3s;-webkit-transition-property:right;transition-property:right;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);right:0;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #e1e1e1;}
.bubble-right:hover:before{right:-10px;}
/* Bubble Bottom */
.bubble-bottom{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:0.3s;transition-duration:0.3s;-webkit-transition-property:bottom;transition-property:bottom;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-width:10px 10px 0 10px;border-color:#e1e1e1 transparent transparent transparent;}
.bubble-bottom:hover:before{bottom:-10px;}
/* Bubble Left */
.bubble-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:0.3s;transition-duration:0.3s;-webkit-transition-property:left;transition-property:left;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent;}
.bubble-left:hover:before{left:-10px;}
/* Bubble Float Top */
.bubble-float-top{display:inline-block;position:relative;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.bubble-float-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);top:0;border-style:solid;border-width:0 10px 10px 10px;border-color:transparent transparent #e1e1e1 transparent;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:top;transition-property:top;}
.bubble-float-top:hover{-webkit-transform:translateY(5px) translateZ(0);-ms-transform:translateY(5px) translateZ(0);transform:translateY(5px) translateZ(0);}
.bubble-float-top:hover:before{top:-10px;}
/* Bubble Float Right */
.bubble-float-right{display:inline-block;position:relative;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.bubble-float-right:before{pointer-events:none;position:absolute;z-index:-1;top:-webkit-calc(50% - 10px);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:0.3s;transition-duration:0.3s;-webkit-transition-property:right;transition-property:right;}
.bubble-float-right:hover{-webkit-transform:translateX(-5px);-ms-transform:translateX(-5px);transform:translateX(-5px);}
.bubble-float-right:hover:before{right:-10px;}
/* Bubble Float Bottom */
.bubble-float-bottom{display:inline-block;position:relative;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.bubble-float-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-style:solid;border-width:10px 10px 0 10px;border-color:#e1e1e1 transparent transparent transparent;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:bottom;transition-property:bottom;}
.bubble-float-bottom:hover{-webkit-transform:translateY(-5px) translateZ(0);-ms-transform:translateY(-5px) translateZ(0);transform:translateY(-5px) translateZ(0);}
.bubble-float-bottom:hover:before{bottom:-10px;}
/* Bubble Float Left */
.bubble-float-left{display:inline-block;position:relative;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);}
.bubble-float-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #e1e1e1 transparent transparent;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:left;transition-property:left;}
.bubble-float-left:hover{-webkit-transform:translateX(5px);-ms-transform:translateX(5px);transform:translateX(5px);}
.bubble-float-left:hover:before{left:-10px;}
/* CURLS */
/* Curl Top Left */
.curl-top-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:white;/* IE9 */
 background:-webkit-linear-gradient(315deg,white 45%,#aaaaaa 50%,#cccccc 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;box-shadow:1px 1px 1px rgba(0,0,0,0.4);-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:width,height;transition-property:width,height;}
.curl-top-left:hover:before{width:25px;height:25px;}
/* Curl Top Right */
.curl-top-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:white;/* IE9 */
 background:-webkit-linear-gradient(225deg,white 45%,#aaaaaa 50%,#cccccc 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;-webkit-transition-property:width,height;transition-property:width,height;}
.curl-top-right:hover:before{width:25px;height:25px;}
/* Curl Bottom Right */
.curl-bottom-right{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:white;/* IE9 */
 background:-webkit-linear-gradient(135deg,white 45%,#aaaaaa 50%,#cccccc 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;-webkit-transition-property:width,height;transition-property:width,height;}
.curl-bottom-right:hover:before{width:25px;height:25px;}
/* Curl Bottom Left */
.curl-bottom-left{display:inline-block;position:relative;-webkit-transform:translateZ(0);-ms-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:white;/* IE9 */
 background:-webkit-linear-gradient(45deg,white 45%,#aaaaaa 50%,#cccccc 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;-webkit-transition-property:width,height;transition-property:width,height;}
.curl-bottom-left:hover:before{width:25px;height:25px;}

附件:下载该文件资源,减少时间成本(增值服务)