✨hover.css

noeypatt · Mar 28, 2020 · 4ad622c · 4ad622c · vercel · Mar 28, 2020
1 parent 3cd0e21
commit 4ad622c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 1 deletion.
diff --git a/components/about.js b/components/about.js
@@ -70,7 +70,7 @@ const About = () => {
                                     }
                                     <div className="more-content">
                                         <h6>อ่านต่อ</h6>
-                                        <img className="animated-fadeRight" src="/static/arrow.svg" alt="arrow-icon" />
+                                        <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
                                     </div>
 
                                 </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "bootstrap": "^4.3.1",
     "d3-scale": "^3.2.1",
     "google-maps-react": "^2.0.2",
+    "hover.css": "^2.3.2",
     "less": "^3.10.3",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",

diff --git a/pages/_document.js b/pages/_document.js
@@ -13,6 +13,7 @@ class MyDocument extends Document {
                 <Head>
                     <head>
                         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
+                        <link href="css/hover.css" rel="stylesheet" media="all"></link>
                     </head>
 
                     <meta charset="utf-8" />

diff --git a/styles/about.scss b/styles/about.scss
@@ -71,6 +71,36 @@
               width: 2rem;
               height: auto;
             }
+            .hvr-wobble-horizontal:hover {
+              animation-name: hvr-wobble-horizontal;
+              animation-duration: 1s;
+              animation-timing-function: ease-in-out;
+              animation-iteration-count: 1;
+              display: inline-block;
+              vertical-align: middle;
+              transform: perspective(1px) translateZ(0);
+            }
+
+            @keyframes hvr-wobble-horizontal {
+              17% {
+                transform: translateX(8px);
+              }
+              34% {
+                transform: translateX(-6px);
+              }
+              50% {
+                transform: translateX(4px);
+              }
+              70% {
+                transform: translateX(-2px);
+              }
+              80% {
+                transform: translateX(1px);
+              }
+              100% {
+                transform: translateX(0);
+              }
+            }
           }
         }
       }