JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <p>status: {{status}}</p>
    <div intro='animate:grow'>growing!</div>

</script>

CSS

/* assume we've done all the prefixes... */
.grow {
    -webkit-animation-name: grow;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-timing-function: ease-out;
}

@-webkit-keyframes grow {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

div {
    display: inline-block;
    font-size: 3em;
}

JavaScript

Ractive.transitions.animate = function ( t, className ) {
    var animation, END;
    
    // assume we have classList...
    t.node.classList.add( className );
    
    animation = t.getStyle( 'animation' );
    
    if ( !animation ) {
        t.complete();
    }
    
    if ( t.node.style.animation !== undefined ) {
        END = 'animationend';
    } else if ( t.node.style.WebkitAnimation !== undefined ) {
        END = 'webkitAnimationEnd';
    }
    
    console.log( 'END', END );
    
    if ( END ) {
        t.node.addEventListener( END, t.complete );
    } else {
        t.complete();
    }
};

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        status: 'introing...'
    },
    complete: function () {
        this.set( 'status', 'complete!' );
    }
});