Update styles.css

css/styles.css

@@ -46,37 +46,39 @@ ol {
 a {
   color: currentColor;
   text-decoration: none;
+  transition: color 0.3s, font-size 0.3s;
 }
 
 button {
   padding: 0;
   cursor: pointer;
+  transition: border, color, background-color 0.3s, font-size 0.3s;
 }
 
 img {
   display: block;
   max-width: 100%;
   height: auto;
 }
-
+use {
+  transition: fill 0.3s, font-size 0.3s;
+}
+label {
+  transition: color 0.3s, font-size 0.3s;
+}
 .overlay.backdrop {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-
   position: fixed;
   top: 0;
   left: 0;
-
   z-index: 1;
-
   display: flex;
   justify-content: center;
   align-items: center;
-
   width: 100%;
   height: 100%;
-
   background-color: rgba(46, 47, 66, 0.4);
 }
 
@@ -335,6 +337,7 @@ img {
     line-height: 136.363636%; /* 15/11 */
     letter-spacing: 0.1em;
     color: rgba(157, 164, 189, 0.6);
+    transition: color 0.3s, font-size 0.3s;
     background-color: transparent;
   }
   .hero-item-btn::after {
@@ -361,6 +364,7 @@ img {
     font-size: 11px;
     line-height: 136.363636%; /* 15/11 */
     color: var(--primary-text-color);
+    transition: color 0.3s, font-size 0.3s;
   }
   .hero-social-item:focus,
   .hero-social-item:hover {
@@ -487,9 +491,7 @@ img {
     height: auto;
     background-color: var(--primary-bg-color);
     transform: translateX(100%);
-    transition-property: transform;
-    transition-duration: 250ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 1s;
   }
   .modal-btn-close {
     position: absolute;
@@ -1550,6 +1552,10 @@ img {
   color: var(--primary-text-color);
   text-decoration: none;
 }
+.footer-link:focus,
+.footer-link:hover {
+  color: var(--accent-bg-color);
+}
 .footer-copyright {
   font-weight: 600;
   font-size: 11px;