JSFiddle - React, Tailwind, and code Playground

by russelluresti

HTML

<p class="transition">Watch me transition</p>

<p>I am some text. Since I am unaliased, I will blink during a transition.</p>

<p class="antialiased">I am more text. Since I am antialiased, I wll not blink.</p>

CSS

body {
    padding: 20px;
    font-family: Helvetica, Arial, sans-serif;
    background: black;
}
p { margin: 10px 0; color: white; }

.antialiased { -webkit-font-smoothing: antialiased; }
.transition {
    -webkit-transition: -webkit-transform 1s;        
    -webkit-transform: scale(1);
    -webkit-transform-origin: 0% 50%;
}
.transition.transitioned {
    -webkit-transform: scale(1.5);        
}

JavaScript

$(function(){
    setInterval(function(){
        $('.transition').toggleClass('transitioned');        
    },3000);        
});