Add hatch animation

README.md

@@ -66,6 +66,7 @@ Here is full list of supported CSS animation name that you can use in animate fu
 
  - bounce
  - flash
+ - hatch
  - head-shake
  - jello
  - pulse

component/animation/animation.map.js

@@ -2,6 +2,7 @@ module.exports = {
   "attention": [
     "bounce",
     "flash",
+    "hatch",
     "head-shake",
     "jello",
     "pulse",

main.less

@@ -1,6 +1,7 @@
 @import "./src/main.less";
 @import "./src/attention/bounce.less";
 @import "./src/attention/flash.less";
+@import "./src/attention/hatch.less";
 @import "./src/attention/head-shake.less";
 @import "./src/attention/jello.less";
 @import "./src/attention/pulse.less";

package.json

@@ -7,7 +7,7 @@
     "animation-kit",
     "effects"
   ],
-  "version": "0.5.1",
+  "version": "0.5.2",
   "browser": "index.js",
   "main": "index.js",
   "scripts": {

src/attention/hatch.less

@@ -0,0 +1,27 @@
+@keyframes hatch {
+	0% {
+		transform: rotate(0deg) scaleY(0.6);
+	}
+	20% {
+		transform: rotate(-2deg) scaleY(1.05);
+	}
+	35% {
+		transform: rotate(2deg) scaleY(1);
+	}
+	50% {
+		transform: rotate(-2deg);
+	}
+	65% {
+		transform: rotate(1deg);
+	}
+	80% {
+		transform: rotate(-1deg);
+	}
+	100% {
+		transform: rotate(0deg);
+	}
+}
+
+.hatch-animation {
+  animation-name: hatch;
+}