Transition not working on hover - css

Question

I don't know but for some reasons, transition doesn't seem to be working. I am testing this Google Chrome.
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:hover:before {
transform: translate(-50%, 0);
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
}
[data-title]:hover:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>
Can anyone help where I am going wrong or am I missing something?
I have even tried to make transition timing to +1 seconds but still it doesn't reflects the same.

Answer 1

You have not set anything for the original state so the transition doesn't know what to go from. If you are only wanting to transition the item's appearance - eg fade in or out, then you need to do something like transition the opacity:
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:before {
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
transform: translate(-50%, 0);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:hover:before,
[data-title]:hover:after {
opacity: 1;
pointer-events: auto;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>

Answer 2

If you want something to transition from one state to another, you have to define both states. This means having a base-style and a :hover-style.
For example:
.test {
width: 100px;
height: 50px;
background: red;
transition: all 2s;
}
.test:hover {
height: 100px;
}
<div class="test">test</div>
This works, because there is an initial state for the height attribute. This however:
.test {
width: 100px;
background: red;
transition: all 2s;
}
.test:hover {
height: 300px;
}
<div class="test">test</div>
This will not work, because the browser doesn't have a specified height as an initial state.