JSFiddle - React, Tailwind, and code Playground

by mkzero

HTML

<body><div id='test'>Text</div></body>

CSS

body {

    width: 100%;
    height:100%;
}
#test {
    color: white;
    background: black; 
    position: absolute;    
    margin-left: -35px;
    margin-top: -35px;
    left: 50%;
    top: 50%;
    font-size: 24px;
    padding: 20px;      
    width: 70px;
    height: 70px;
    content: 'Hover me! :)';
}

#test:hover {
    -webkit-animation: testmation 5s infinite;
    content: "Hover-Crazyness. Yay.";
}

@-webkit-keyframes testmation
{
0% {
    color: red;
    -webkit-transform: rotateY(0deg) rotateZ(0deg);
}

50% {
    color: yellow;
    -webkit-transform: rotateY(180deg) rotateZ(360deg);
}

100% {
    color: red;
    -webkit-transform: rotateY(360deg) rotateZ(0deg);
}
}