update avatar

Author: madawei2699

resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content

@@ -289,12 +289,26 @@ a[href^="#fn:"]:after {
 .avatar img {
   width: 20rem;
   height: auto;
-  border-radius: 50%;
-  opacity: 1;
-  animation: fadeIn 3s ease; }
+  border-radius: 50%; }
   @media only screen and (max-width: 768px) {
     .avatar img {
       width: 10rem; } }
+.avatar img:hover {
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px; }
+
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0); }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0); }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0); }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0); } }
+
 @keyframes fadeIn {
   0% {
     opacity: 0; }

themes/hugo-coder/assets/scss/_content.scss

@@ -82,13 +82,38 @@
   width: 20rem;
   height: auto;
   border-radius: 50%;
-  opacity: 1;
-  animation: fadeIn 5s ease;
+  // opacity: 1;
+  // animation: fadeIn 5s ease;
   @media only screen and (max-width : 768px) {
     width: 10rem;
   }
 }
 
+.avatar img:hover {
+  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
 @keyframes fadeIn{
   0%{
     opacity: 0;