animista-css-generator
Version:
Animista CSS Generator
29 lines (25 loc) • 884 B
JavaScript
const { cssHash } = require('css-hash');
const generator = require('../generator');
const animationClass = cssHash(
(className) => `
${generator.keyframes(
className,
`
0% {
text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
${generator.fields('transform: translateX(0) translateY(0)')}
}
100% {
text-shadow: 1px 1px #555555, 2px 2px #555555, 3px 3px #555555, 4px 4px #555555, 5px 5px #555555, 6px 6px #555555, 7px 7px #555555, 8px 8px #555555;
${generator.fields('transform: translateX(-8px) translateY(-8px)')}
}
`,
)}
.${className} {
${generator.fields(
`animation: ${className} var(--animate-duration) both`,
)}
}
`,
);
module.exports = animationClass;