JSFiddle - React, Tailwind, and code Playground

by linmic

HTML

<div class="content"></div>

SCSS

.content {
    width: 40px;
    height: 40px;
    background: green;
    position: absolute;
    left: 200px;
    top: 500px;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-animation-name: distort;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes distort {
    0% {
        -webkit-transform: matrix3d(
            2, 0, 0, 0,
            0, 2, 0, 0,
            0, 0, 2, 0,
            0, 0, 0, 2);
    }
    50% {
        -webkit-transform: matrix3d(
            3, 0, 0, 0,
            0, 3, 0, 0,
            0, 0, 3, 0,
            0, 0, 0, 3);
    }
    100% {
        -webkit-transform: matrix3d(
            4, 0, 0, 0,
            0, 4, 0, 0,
            0, 0, 4, 0,
            0, 0, 0, 4);                
    }
}