New effects

linebreaker · Jan 15, 2014 · 31878f0 · 31878f0
2 parents 2f861de + b41c3bf
commit 31878f0
Show file tree

Hide file tree

Showing 7 changed files with 321 additions and 4 deletions.
diff --git a/css/hover-min.css b/css/hover-min.css
diff --git a/css/hover.css b/css/hover.css
@@ -1,6 +1,6 @@
 /*!
  * Hover.css (http://ianlunn.co.uk/)
- * Version: 1.0.3
+ * Version: 1.0.4
  * Author: Ian Lunn @IanLunn
  * Author URL: http://ianlunn.co.uk/
  * Github: https://github.com/IanLunn/Hover
@@ -535,6 +535,30 @@
   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-tap-highlight-color: rgba(0, 0, 0, 0);
+  -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 {
@@ -1001,6 +1025,190 @@
   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-tap-highlight-color: rgba(0, 0, 0, 0);
+  -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-tap-highlight-color: rgba(0, 0, 0, 0);
+  -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 */

diff --git a/index.html b/index.html
@@ -39,11 +39,14 @@ <h2>2D Transforms</h2>
 			<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>
 
 
 

diff --git a/scss/effects/_buzz-out.scss b/scss/effects/_buzz-out.scss
@@ -0,0 +1,55 @@
+/* Buzz Out */
+@keyframes buzz-out {
+	10% {
+		transform: translateX(3px) rotate(2deg);
+	}
+
+	20% {
+		transform: translateX(-3px) rotate(-2deg);
+	}
+
+	30% {
+		transform: translateX(3px) rotate(2deg);
+	}
+
+	40% {
+		transform: translateX(-3px) rotate(-2deg);
+	}
+
+	50% {
+		transform: translateX(2px) rotate(1deg);
+	}
+
+	60% {
+		transform: translateX(-2px) rotate(-1deg);
+	}
+
+	70% {
+		transform: translateX(2px) rotate(1deg);
+	}
+
+	80% {
+		transform: translateX(-2px) rotate(-1deg);
+	}
+
+	90% {
+		transform: translateX(1px) rotate(0);
+	}
+
+	100% {
+		transform: translateX(-1px) rotate(0);
+	}
+}
+
+@mixin buzz-out {
+	display: inline-block;
+
+	@include hacks();
+
+	&:hover {
+		animation-name: buzz-out;
+		animation-duration: .75s;
+		animation-timing-function: linear;
+		animation-iteration-count: 1;
+	}
+}
diff --git a/scss/effects/_buzz.scss b/scss/effects/_buzz.scss
@@ -0,0 +1,23 @@
+/* Buzz */
+@keyframes buzz {
+	50% {
+		transform: translateX(3px) rotate(2deg);
+	}
+
+	100% {
+		transform: translateX(-3px) rotate(-2deg);
+	}
+}
+
+@mixin buzz {
+	display: inline-block;
+
+	@include hacks();
+
+	&:hover {
+		animation-name: buzz;
+		animation-duration: .15s;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+	}
+}
diff --git a/scss/effects/_skew-backward.scss b/scss/effects/_skew-backward.scss
@@ -0,0 +1,13 @@
+/* Skew Backward */
+@mixin skew-backward {
+	display: inline-block;
+	transition-duration: $defaultDuration;
+	transition-property: transform;
+	transform-origin: 0 100%;
+
+	@include hacks();
+
+	&:hover {
+		transform: skew(10deg);
+	}
+}
diff --git a/scss/hover.scss b/scss/hover.scss
@@ -1,6 +1,6 @@
 /*!
  * Hover.css (http://ianlunn.co.uk/)
- * Version: 1.0.3
+ * Version: 1.0.4
  * Author: Ian Lunn @IanLunn
  * Author URL: http://ianlunn.co.uk/
  * Github: https://github.com/IanLunn/Hover
@@ -100,6 +100,11 @@
 	@include skew-forward();
 }
 
+@import "effects/skew-backward";
+.skew-backward {
+    @include skew-backward();
+}
+
 @import "effects/wobble-vertical";
 .wobble-vertical {
 	@include wobble-vertical();
@@ -125,6 +130,16 @@
     @include wobble-skew();
 }
 
+@import "effects/buzz";
+.buzz {
+    @include buzz();
+}
+
+@import "effects/buzz-out";
+.buzz-out {
+    @include buzz-out();
+}
+
 
 /* BORDER TRANSITIONS */
 @import "effects/border-fade";