Transition Transform, Ease; Some elements 'easing' in, others aren't

Question

I have 2 features on a page, both using Transform ease when moused over. The image on the left (the character), when moused over, eases into position. The buttons in the middle of the page are supposed to scale up, but ease to the enlarged scale.

I've tried copying the code for the part that works, and using that code respectively on the buttons, but I still can't achieve the 'ease' transition

This is the CSS for the part of the site that functions as I want it to:

#side {
    position: fixed;
    bottom: -10px;
    left: -6px;
}

.magna {
    height: 400px;
    width: auto;
}

.moving {
    position: relative;
    transition: transform 0.3s ease;
    transform: translateY(10px);
}

.moving:hover {
    transform: translateX(5px);
}

This is the CSS for the buttons, that don't ease in:

#social {
    margin: 0px auto;
    text-align: center;
    margin-top: calc(97vh - 500px);
}

.social-icon {
    width: 80px;
    height: 80px;
    margin: 0px auto;
    transition;
    transform 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-8px);
    transform: scale(1.12);
}

.middle {
    padding: 0px 50px 0px 50px;
}

The project can be found live at: http://51.38.83.57/

I am looking for the buttons in the center's scale to increase but to ease into the new size as opposed to snapping to the new size

Think this is what you need: https://stackoverflow.com/q/10765755/1501613 — cYrixmorten, Aug 18 '19 at 11:35

score 0 · Answer 1 · answered Aug 18 '19 at 11:52

0

Previous code was:

.social-icon:hover { transform: translateY(-8px); transform: scale(1.12); }

Changed to:

.social-icon:hover { transform: translateY(-8px) scale(1.12); }

Suggestion from cYrixmorten was correct

answered Aug 18 '19 at 11:52

Furbloke

1
1

score 0 · Answer 2 · answered Aug 18 '19 at 11:55

Replace transform: 0.3s ease with transition: 0.3s ease;

#social {
  margin: 0px auto;
  text-align: center;
}

.social-icon {
  width: 80px;
  height: 80px;
  margin: 0px auto;
  transition: 0.3s ease; /* Here's the error */
}

.social-icon:hover {
  transform: translateY(-8px);
  transform: scale(1.12);
}

.middle {
  padding: 0px 50px 0px 50px;
}

<div id="social">
  <a href=""><img class="social-icon" src="https://via.placeholder.com/80"></a>
  <a href=""><img class="social-icon middle" src="https://via.placeholder.com/80"></a>
  <a href=""><img class=" social-icon" src="https://via.placeholder.com/80"></a>
</div>

Transition Transform, Ease; Some elements 'easing' in, others aren't

2 Answers2