Snappy transitions

Question

I am currently working on Rob Dey's Upskill Crash Course on web development. Everything is going well but I had a question about the animation of my logo. Here is my code:

.navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a  { // Used for the 'Brand' button AKA devmatch on navbar and About button
  color: white;
  filter: blur(0.43px);
  transition: 1s;
  &:hover {
    color: white;
    opacity: 0.75;
    transform: scale(1.1);
  }
}

This code creates this sort of animation for my logo: https://i.stack.imgur.com/OjkgJ.jpg

It is all working well the only thing I'm wondering is if it's possible to stop the "snapping back into place" that seems to happen at the end of the transition. I fear the only way to stop it is to create my own animation and import it rather than using the transition modifier.

Thanks

Edit: I actually found somewhat of an answer below.

Answer 1

An animation is browser-specific. That snap could not happen on another browser.

But for your specific case, the animation is too long. One second is a "dramatic" animation, but on a button should be visual feedback. Probably .3s or .5s is a better choice and will reduce the "snapping" look.

You could also try some ease-out so the animation is smoother at the end.

You can also test some new scaling dimensions. Try 1.15.

And you also can do the opposite. Let your logo be at a scale of 1 at the end, and start with a value of .9. Experiment a bit.

Answer 2

I myself have seemed to have found an answer to my own question! Thank you to the people who responded with answers, especially Rafael who invited me to experiment. The thing I found that worked the best was instead of using transform: scale(); to make my logo pop more, It was a lot smoother when adjusting the font size using pixels. Code below:

    .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a  { // Used for the 'Brand' button AKA devmatch on navbar and About button
  color: white;
  filter: blur(0.3px);
  transform: scale(0.9);
  transition: 0.3s;
  &:hover {
    color: white;
    opacity: 0.75;
    font-size: 20px;
  }
}

And finally the new transition: https://i.stack.imgur.com/0r1pW.jpg