JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="the_div"></div>

CSS

div {
    opacity: 0;
    transform: scale(0);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #F06292;
    animation: bubble-effect-in 1.2s forwards, bubble-effect-out 2s 1200ms forwards;
}
@keyframes bubble-effect-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes bubble-effect-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

JavaScript

function css_to_js_timing(el, css_property) {
    // Get property's timing
    var el = $(el),
        prop = el.css(css_property),
        propArr = prop.replace(" ", "").split(","),
        propArr_last = propArr[propArr.length - 1];
    
    // Convert a given string to a ms output
    // Use ms as default, so when no indication (s/ms) is given, use ms
    var val = propArr_last;
    
    return parseFloat(val) * (/\ds$/.test(val) ? 1000 : 1);
}

console.log(css_to_js_timing("#the_div", "animation-duration"));
// Note that you can also use "shorthand" jQuery, e.g. animationDelay
console.log(css_to_js_timing("#the_div", "animationDelay"));