CODEWITHSUNDEEP
htmlcss
A Alvarez H
A Alvarez H

Reputation: 21

CSS Transition/Transform - Eases out but doesn't ease in?

When I stop hovering the button, the returning transition is smooth. But when I hover, the transition in is not as smooth.

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: transform 0.5s ease-in-out, scale 0.5s ease-in-out;}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
    transition: background-color 0.4s ease-in-out 2ms, padding 0.4s ease-in-out 2ms;}
<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

Upvotes: 1

Views: 620

Answers (3)

Hossein Azizdokht
Hossein Azizdokht

Reputation: 1005

You should not put the transition in hover, it is better to be in the class itself and also set the transition value to "all"

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: all 0.4s ease-in-out;
}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
}
<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

Upvotes: 1

StarshipladDev
StarshipladDev

Reputation: 1145

You forgot to add a transition value to your transform property when hovering over .button1 as below:

transition: transform 0.4s ease-in-out

For every property of the CSS, you need to apply a transition effect to it on both 'keyframes' (In this case that is .button1:hover -> .button1 and .button1 -> .button1:hover)

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: transform 0.5s ease-in-out, scale 0.5s ease-in-out;}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
    transition: transform 0.4s ease-in-out ,background-color 0.4s ease-in-out 2ms, padding 0.4s ease-in-out 2ms;}
<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

Upvotes: 2

לבני מלכה
לבני מלכה

Reputation: 16251

Use ease-in then ease-out

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: transform 0.5s ease-in, scale 0.5s ease-out;}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
    transition: background-color 0.4s ease-in 2ms, padding 0.4s ease-out 2ms;}
<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

Upvotes: 0

Related Questions