Why is my CSS transition not working in reverse? - html

Question

I am quite new to html and css, and have started using transitions. I watched Kevin Powell's video on it, and all his demonstrations had the transition applied when transitioning out (for instance when he stopped hovering on the element). However in my example, the transition works when the logo moves to the left, but instantly teleports back. Why is this, and what have I done wrong?
body {
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav {
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
nav:hover .logobg {
left: 0;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
.navtext {
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo {
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.logobg {
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navelements {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover {
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221, 16, 247, 1) 0%, rgba(0, 212, 255, 1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}
<nav>
<a href="index.html">
<div class="logobg">
<div class="logo">
AI
</div>
</div>
</a>
<a href="blank.html">
<div class="">
</div>
</a>
</nav>
<div class="navbarline"></div>

Answer 1

you should add this rule:
nav .logobg {
left: 50%;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
So when mouse leave the element it should apply the transition you defined that overrides the :hover rule.

Answer 2

Lety has a solid answer but I thought I would elaborate on my comment earlier. So I had the right idea just wrong placement. I moved .logobg up above nav:hover .logobg and added your duration and timing to .logobg. It now transitions smoothly back and forth.
body {
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav {
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
.logobg {
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
nav:hover .logobg {
left: 0;
transform: translateX(0);
}
.navtext {
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo {
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.navelements {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover {
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221, 16, 247, 1) 0%, rgba(0, 212, 255, 1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}
<nav>
<a href="index.html">
<div class="logobg">
<div class="logo">
AI
</div>
</div>
</a>
<a href="blank.html">
<div class="">
</div>
</a>
</nav>
<div class="navbarline"></div>

Answer 3

CSS transitions reverse once the "hover" event stops. Here's a way to do it with javascript.
I'm adding an "id" with the styling that you require. An id's css will always override that of a class, which is why this works.
The javascript:
const nav = document.querySelector("nav");
const logobg = document.querySelector(".logobg");
nav.addEventListener("mouseover", () => {
logobg.setAttribute("id", "move");
})
The css:
body{
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav{
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
#move {
left: 0;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
.navtext{
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo{
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.logobg{
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navelements{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover{
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221,16,247,1) 0%, rgba(0,212,255,1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}