Hey, animations are disabled based on your preference! Click here to enable them.
Cool CSS Animation
Scroll Animations
Showcase
Tutorial
Cheatsheet
Toggle Animations
{{ tab.title }}
Background Color
Background Color
{{ cssTemplate }}
{{ htmlTemplate }}
.el:nth-child({{ n }}) { animation-name: {{ animationName }}; animation-delay: {{ styleValues.delay * n + 's' }}; background-color: {{ styleValues.bgcolor }}; border-radius: {{ styles.radius }}; top: {{ styleValues.offsetTop * (n - 1) + 'px '}}; left: {{ styleValues.offsetLeft * (n - 1) + 'px '}}; }
@keyframes go { 50% { transform: translate({{ styleValues.transX }}px, {{ styleValues.transY }}px) scale({{ styleValues.scale }}); background-color: {{ styleValues.bgcolorTo }}; } }