Add the CSS animation to tooltip

CSS variable and CSS transition

Ckmobile
2 min readNov 15, 2021

--

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…

--

--

Ckmobile

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile