Title

CSS @keyframe animations

description

Base for css @keyframe animation structure, with a few examples

Published 2022-06-02

Modified 2022-09-13

content

				
					@keyframes animationname {
    0% { /*from*/  }
    100% { /* to */ }
}

.class-to-apply-animation .selector {
    animation: animationname 4s infinite ease-in-out;
}
				
			

'bouncer'

				
					@keyframes bouncer {
    0% { transform: translateY(-5px)  }
    50% { transform: translateY(10px) }
    100% { transform: translateY(-5px) }
}

.bouncer img{
    animation: bouncer 4s infinite ease-in-out;
}
				
			

'heartbeat'

'(background) color flow'

'stretch morph'

'fly out'

ALPHA
OMEGA

ALPHA
OMEGA

ALPHA
OMEGA