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)
)
- The styling used is
- 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
- This is noticeable in the second snippet when you stop hovering on any of the links, the transition timing is now
Answered By - Harrison
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.