How does Transition properties in CSS work?

Issue

I am studying transition in CSS, I watched some tutorials on YouTube and I feel so confused about this.

A piece of code HTML

        <ul class="navbar__menu">
            <li class="navbar__item">
                <a href="#home" class="navbar__links" id="home-page">Home</a>
            </li>
            <li class="navbar__item">
                <a href="#about" class="navbar__links" id="about-page">About</a>
            </li>
            <li class="navbar__item">
                <a href="#services" class="navbar__links" id="services-page">Services</a>
            </li>
            <li class="navbar__btn">
                <a href="#sign-up" class="button" id="signup">Sign Up</a>
            </li>
        </ul>

and with two code snippets CSS

Code snippet 1

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

.navbar__links:hover {
  color: #9518fc;
  transition: all 0.3s ease;
}

Code snippet 2

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

.navbar__links:hover {
  color: #9518fc;
}

Why the instructor insert transition: all 0.3s ease; into both two class. I tried both cases, but I don't see any difference.

So, anyone can explain to me, which one is right?

Solution

The short answer is that you would "typically" want to set the transition property on the base style of the item; as in your first snippet (also copied below).

This is interesting because what you've found is that you can apply different transitions at different times.

Take the second snippet, which I've change so that the :hover transition takes 1.3s instead. You'll notice that when hovering the transition is slow, but when un-hovering the transition if fast again, and this is what some developers use to make asymmetric-transitions for different actions/states of the UI.

Its worth noting that all is often considered "unfavourable" as it could lead to applying transitions to all sorts of unexpected properties, so it is often better practice to specify the transition-property, such as:

  transition: color 0.3s ease;

Additionally, not "all" properties can be animated in this way, for example display cannot be animated (at least not at the time of writing, Nov 2023)

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

.navbar__links:hover {
  color: #9518fc;
}

<ul class="navbar__menu">
  <li class="navbar__item">
    <a href="#home" class="navbar__links" id="home-page">Home</a>
  </li>
  <li class="navbar__item">
    <a href="#about" class="navbar__links" id="about-page">About</a>
  </li>
  <li class="navbar__item">
    <a href="#services" class="navbar__links" id="services-page">Services</a>
  </li>
  <li class="navbar__btn">
    <a href="#sign-up" class="button" id="signup">Sign Up</a>
  </li>
</ul>

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

.navbar__links:hover {
  color: #9518fc;
  transition: all 1.3s ease;
}

<ul class="navbar__menu">
  <li class="navbar__item">
    <a href="#home" class="navbar__links" id="home-page">Home</a>
  </li>
  <li class="navbar__item">
    <a href="#about" class="navbar__links" id="about-page">About</a>
  </li>
  <li class="navbar__item">
    <a href="#services" class="navbar__links" id="services-page">Services</a>
  </li>
  <li class="navbar__btn">
    <a href="#sign-up" class="button" id="signup">Sign Up</a>
  </li>
</ul>

EDIT:

To summarise:

• It's all about the initial state of the user's interaction
• When you start to hover, the initial state is "not hovering"
  • The styling used is .navbar__links (which can also be expressed as .navbar__links:not(:hover))
• When you stop hovering (i.e. leaving) the initial state is "hovering" so .navbar__links:hover is used
  • This is noticeable in the second snippet when you stop hovering on any of the links, the transition timing is now 1.3s because it is using the style in .navbar__links:hover

Answered By - Harrison