add css animations on hover

SvitlanaTsupryk-jul18 · Mar 17, 2019 · c0137f0 · c0137f0
1 parent 4c7a91a
commit c0137f0
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 11 deletions.
diff --git a/css/style.css b/css/style.css
@@ -56,8 +56,11 @@ nav {
   font-size: 12px;
   font-weight: 900;
   text-transform: uppercase;
-  padding: 30px 15px !important;
-  color: white !important; }
+  padding: 26px 15px !important;
+  color: white !important;
+  transition: all .2s; }
+  .nav-link:hover, .nav-link:active {
+    color: #bc9352 !important; }
 
 .header__top {
   background-color: #2d3b50;
@@ -91,13 +94,22 @@ nav {
 
 .header__icon {
   color: white;
-  padding-right: 10px; }
+  padding-right: 10px;
+  transition: all .2s; }
+  .header__icon:hover {
+    transform: scale(1.5); }
 
 .header__link {
   font-weight: 700;
   color: white;
   padding: 12px;
-  font-size: 12px; }
+  font-size: 12px;
+  transition: all .1s; }
+  .header__link:hover .header__icon {
+    animation: swing .8s infinite; }
+  .header__link:hover {
+    text-decoration: none;
+    color: #bc9352; }
 
 .logo {
   background-image: url(../images/Polygon1.svg);
@@ -163,7 +175,12 @@ nav {
     line-height: 40px; }
   .hero__btn {
     font-style: italic;
-    padding: 20px; }
+    padding: 20px;
+    transition: all 0.2s; }
+    .hero__btn:hover {
+      color: #bc9352; }
+    .hero__btn:hover .scroll-icon {
+      transform: translateY(10px); }
   .hero__adapt {
     display: none;
     justify-content: space-between;
@@ -190,14 +207,20 @@ nav {
           width: 1px;
           height: 18px; }
 
+.scroll-icon {
+  transition: all .5s; }
+
 .anchor {
   display: block;
   margin-top: -20px; }
 
 .details-btn {
   padding: 1rem 90px;
   text-transform: uppercase;
-  background: linear-gradient(90deg, #bc9352 0%, #c19857 25%, #d1a866 100%); }
+  background: linear-gradient(90deg, #bc9352 0%, #c19857 25%, #d1a866 100%);
+  transition: all .2s; }
+  .details-btn:hover {
+    animation: rubberBand .8s 1; }
 
 .search {
   height: 100px;
@@ -364,3 +387,43 @@ option {
   transform: translateY(-200%);
   visibility: hidden;
   z-index: -1; }
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg); }
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg); }
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg); }
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg); }
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg); } }
+
+@keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1); }
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1); }
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1); }
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1); }
+  65% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1); }
+  75% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1); }
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1); } }
diff --git a/index.html b/index.html
@@ -7,7 +7,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Fan Time</title>
+    <meta name="Test task for Funtime" content="Give me this job">
+    <title>Fun Time</title>
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet" href="sass/multirange.css">
@@ -17,7 +18,7 @@
 <body>
     <div class="preloader">
         <div class="logo-anim">
-            <img src="./images/logo.png">
+            <img src="./images/logo.png" alt="Yacht Marine">
         </div>
     </div>
 
@@ -143,7 +144,7 @@ <h5 class="modal-title" id="exampleModal3Label">Modal title</h5>
             <button type="button" class="hero__adapt-btn isbefore">YACHT NAME</button>
         </div>
         <div>
-            <button type="button" class="hero__btn">Scroll Down &nbsp;&nbsp;<img src="./images/icon/fa-long-arrow-up.svg" alt="arrow down"></button>
+            <button type="button" class="hero__btn">Scroll Down &nbsp;&nbsp;<img class="scroll-icon" src="./images/icon/fa-long-arrow-up.svg" alt="arrow down"></button>
         </div>
     </section>
 

diff --git a/sass/style.scss b/sass/style.scss
@@ -70,8 +70,13 @@
                     font-size: 12px;
                     font-weight: 900;
                     text-transform: uppercase;
-                    padding: 30px 15px !important;
+                    padding: 26px 15px !important;
                     color: white !important;
+                    transition: all .2s;
+                    &:hover,
+                    &:active {
+                        color: $brand-color!important;
+                    }
                 }
 
                 .header {
@@ -111,12 +116,24 @@
                     &__icon {
                         color: white;
                         padding-right: 10px;
+                        transition: all .2s;
+                        &:hover {
+                            transform: scale(1.5);
+                        }
                     }
                     &__link {
                         font-weight: 700;
                         color: white;
                         padding: 12px;
                         font-size: 12px;
+                        transition: all .1s;
+                        &:hover .header__icon {
+                            animation: swing .8s infinite;
+                        }
+                        &:hover {
+                            text-decoration: none;
+                            color: $brand-color;
+                        }
                     }
                 }
 
@@ -196,6 +213,13 @@
                         @extend %button;
                         font-style: italic;
                         padding: 20px;
+                        transition: all 0.2s;
+                        &:hover {
+                            color: $brand-color;
+                        }
+                        &:hover .scroll-icon {
+                            transform: translateY(10px);
+                        }
                     }
                     &__adapt {
                         display: none;
@@ -229,6 +253,10 @@
                     }
                 }
 
+                .scroll-icon {
+                    transition: all .5s;
+                }
+
                 .anchor {
                     display: block;
                     margin-top: -20px;
@@ -239,6 +267,10 @@
                     padding: 1rem 90px;
                     text-transform: uppercase;
                     background: linear-gradient(90deg, $brand-color 0%, #c19857 25%, #d1a866 100%);
+                    transition: all .2s;
+                    &:hover {
+                        animation: rubberBand .8s 1;
+                    }
                 }
 
                 .search {
@@ -465,4 +497,59 @@
                     transform: translateY(-200%);
                     visibility: hidden;
                     z-index: -1;
+                }
+
+                //keyframes for animation
+                @keyframes swing {
+                    20% {
+                        -webkit-transform: rotate3d(0, 0, 1, 15deg);
+                        transform: rotate3d(0, 0, 1, 15deg);
+                    }
+                    40% {
+                        -webkit-transform: rotate3d(0, 0, 1, -10deg);
+                        transform: rotate3d(0, 0, 1, -10deg);
+                    }
+                    60% {
+                        -webkit-transform: rotate3d(0, 0, 1, 5deg);
+                        transform: rotate3d(0, 0, 1, 5deg);
+                    }
+                    80% {
+                        -webkit-transform: rotate3d(0, 0, 1, -5deg);
+                        transform: rotate3d(0, 0, 1, -5deg);
+                    }
+                    to {
+                        -webkit-transform: rotate3d(0, 0, 1, 0deg);
+                        transform: rotate3d(0, 0, 1, 0deg);
+                    }
+                }
+
+                @keyframes rubberBand {
+                    from {
+                        -webkit-transform: scale3d(1, 1, 1);
+                        transform: scale3d(1, 1, 1);
+                    }
+                    30% {
+                        -webkit-transform: scale3d(1.25, 0.75, 1);
+                        transform: scale3d(1.25, 0.75, 1);
+                    }
+                    40% {
+                        -webkit-transform: scale3d(0.75, 1.25, 1);
+                        transform: scale3d(0.75, 1.25, 1);
+                    }
+                    50% {
+                        -webkit-transform: scale3d(1.15, 0.85, 1);
+                        transform: scale3d(1.15, 0.85, 1);
+                    }
+                    65% {
+                        -webkit-transform: scale3d(0.95, 1.05, 1);
+                        transform: scale3d(0.95, 1.05, 1);
+                    }
+                    75% {
+                        -webkit-transform: scale3d(1.05, 0.95, 1);
+                        transform: scale3d(1.05, 0.95, 1);
+                    }
+                    to {
+                        -webkit-transform: scale3d(1, 1, 1);
+                        transform: scale3d(1, 1, 1);
+                    }
                 }
diff --git a/script.js b/script.js
@@ -39,7 +39,8 @@
         let tl = new TimelineMax();
         tl
             .from(".header", 1, {
-                y: '-300%'
+                y: '-300%',
+                delay: 1
             }, )
             .staggerFrom(".anim", .5, {
                 y: '150',