Add the CSS animation to tooltip

CSS variable and CSS transition

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.

Photo by Zhifei Zhou on Unsplash

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…