JSFiddle - React, Tailwind, and code Playground
HTML
<div style="position: absolute;">
<div class="some-size toolipster" style="z-index: 20;"></div>
<div class="some-size animation" style="z-index: 19;"></div>
</div>
CSS
.some-size
{
position: absolute;
top: 20px;
left: 20px;
width: 30px;
height: 30px;
background-color: #FF0000;
}
.animation:hover,
.toolipster:hover + .animation{
cursor: pointer;
animation: grow-animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: grow-animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: grow-animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: grow-animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: grow-animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
}
@keyframes grow-animationFrames{
0% {
transform: scaleX(1.00) scaleY(1.00) ;
}
100% {
transform: scaleX(2.00) scaleY(2.00) ;
}
}
@-moz-keyframes grow-animationFrames{
0% {
-moz-transform: scaleX(1.00) scaleY(1.00) ;
}
100% {
-moz-transform: scaleX(2.00) scaleY(2.00) ;
}
}
@-webkit-keyframes grow-animationFrames {
0% {
-webkit-transform: scaleX(1.00) scaleY(1.00) ;
}
100% {
-webkit-transform: scaleX(2.00) scaleY(2.00) ;
}
}
@-o-keyframes grow-animationFrames {
0% {
-o-transform: scaleX(1.00) scaleY(1.00) ;
}
100% {
-o-transform: scaleX(2.00) scaleY(2.00) ;
}
}
@-ms-keyframes grow-animationFrames {
0% {
-ms-transform: scaleX(1.00) scaleY(1.00) ;
}
100% {
-ms-transform: scaleX(2.00) scaleY(2.00) ;
}
}
JavaScript
// Comment
// Tooltipster plugin class to launc a tooltip with HTML