Add an animation to the profile image

nonumeros · Aug 9, 2014 · 757d9cf · 757d9cf
1 parent 6a60a67
commit 757d9cf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/source/sass/_animations.scss b/source/sass/_animations.scss
@@ -0,0 +1,22 @@
+// -------------------------------------------
+//   CSS animations
+// -------------------------------------------
+
+.animated {
+  -webkit-animation-duration: .3s;
+  animation-duration: .3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+/* Shake animation */
+@-webkit-keyframes shake {
+    0%, 100% {-webkit-transform: translateX(0);}
+    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
+    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
+}
+@keyframes shake {
+    0%, 100% {transform: translateX(0);}
+    10%, 30%, 50%, 70%, 90% {transform: translateX(-1px);}
+    20%, 40%, 60%, 80% {transform: translateX(1px);}
+}
diff --git a/source/sass/_modules.scss b/source/sass/_modules.scss
@@ -88,4 +88,9 @@
   border-radius: 50%;
   width: 80px;
   height: auto;
+
+  &:hover {
+    -webkit-animation-name: shake;
+    animation-name: shake;
+  }
 }
diff --git a/source/sass/application.scss b/source/sass/application.scss
@@ -9,3 +9,4 @@
 @import "mixins";
 @import "layouts";
 @import "modules";
+@import "animations";