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;
|}];

• Brackets inside the keyframe declaration are optional. %keyframe('{ ... }') [%keyframe {| { ... } |}] and %keyframe('...') [%keyframe {| ... |}] are the same.
• The keyframe name is defined with the same method as classNames, using a hash.
• The type of the keyframe is an opaque type (opens in a new tab). The internal representations is a string.