Define keyframes
Generates keyframes, method to create keyframe animations in CSS
let fadeIn = %keyframe(`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`)
module Component = %styled.div(`
animation-name: $(fadeIn);
width: 100px;
height: 100px;
`)let fadeIn = %keyframe(`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`)
module Component = %styled.div(`
animation-name: $(fadeIn);
width: 100px;
height: 100px;
`)- Braces are optional.
%keyframe({ ... })%keyframe({ ... })and%keyframe(...)%keyframe(...)are the same. - The keyframe name is defined outside of the CSS.
- The type of the keyframe is
string, but hidden in an opaque type.