Jon Heslop

@jonheslop

Web Designer

116

in London

Neat code for a ripple animation of SVG lines
// postcss.config.js module.exports = { plugins: [ require('postcss-cssnext'), require('postcss-for'), require('postcss-math'), require('postcss-simple-vars'), ] } // style.css @keyframes bump { 8%, 11% { transform: translate(0, 0); } 10% { transform: translate(-.333em, -.333em); } } @for $i from 1 to 30 { .line-$i { transform-origin: bottom left; animation: bump 10s cubic-bezier(.67,-0.13,.47,1.22) infinite; animation-delay: resolve(0.1s * $i / 3); } }