Add the CSS animation to tooltip
In the previous article, we already created the tooltip.
This part we want to add the animation to this tooltip. We want to make it from scale 0 to scale 1.
But before we continue, just want to demonstrate a easy transition first. Just change the background color from red to yellow.
.avatar::before,.avatar::after{background-color:red;transition: 2s background-color;}.avatar:hover::before,.avatar:hover::after{background-color:yellow;}
Transition of scale
We will do a similar thing to create the transition about the scale.
.avatar::before{position: absolute;content: attr(tooltip);height: 25px;width:max-content;background:greenyellow;left:50%;transform:translate(-50%,calc(-100% - 40px)) ;}.avatar::after{position:absolute;content:'';border: 20px solid transparent;border-top-color: blue;left:50%;transform:translate(-50%,-100%)}
Extract the similar thing, other make as variable
.avatar::before,.avatar::after{left: 50%;--scale:0;transform:translate(-50%,var(--translate_y)) scale(var(--scale));transition:transform 250ms;}.avatar:hover::before,.avatar:hover::after{--scale:1;}
Then add the --translate_y
on both .avatar::before and after
.avatar::before{position: absolute;content…