[animate] {
    opacity: 0;
  }
  
  [animate="none"] {
    opacity: 1;
  }
  
  [animate="fade"] {
    transition: opacity var(--duration, 0.4s) ease-out var(--delay, 0.3s);
  }
  
  [animate="right"] {
    position: relative;
    left: -20px;
    transition:
      opacity var(--duration, 0.6s) ease-out var(--delay, 0.3s),
      left var(--duration, 0.6s) ease-out var(--delay, 0.3s);
  }
  
  [animate="up"] {
    position: relative;
    top: 20px;
    transition:
      opacity var(--duration, 0.5s) ease-out var(--delay, 0.3s),
      top var(--duration, 0.4s) ease-out var(--delay, 0.3s);
  }
  
  [animate="down"] {
    position: relative;
    top: -10px;
    transition:
      opacity var(--duration, 0.4s) ease-out var(--delay, 0.3s),
      top var(--duration, 0.4s) ease-out var(--delay, 0.3s);
  }
  
  [animate="bg"] {
    background-color: var(--initial-color, #fff);
    opacity: 1;
    transition: background-color var(--duration, 0.5s) ease-out var(--delay, 0.3s);
  }
  
  [animate=grow] {
    opacity: 1;
    height: 0;
    transition: height var(--duration, 0.5s) ease-out var(--delay, 0.3s);
  }
  
  [animate="svg"] {
    opacity: 1;
    stroke-dasharray: 1041px;
    stroke-dashoffset: 1041px;
    transition: stroke-dashoffset var(--duration, 1s) ease-out var(--delay, 0.5s);
  }
  
  [animate="flip"] {
    perspective: 8000px;
    transform-style: preserve-3d;
    transform-origin: top left;
  }
  
  [animate="flip"] img,
  [animate="flip"] div {
    display: block;
    height: 100%;
    transform: rotate3d(0, 1, 0, -90.01deg);
    transition: transform .4s ease-out var(--delay, 0.3s);
    width: 100%;
  }
  
  [animate="flip"].kp-animate img,
  [animate="flip"].kp-animate div {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  
  .kp-animate {
    opacity: 1;
  }
  
  [animate="right"].kp-animate {
    left: 0;
  }
  
  [animate="up"].kp-animate,
  [animate="down"].kp-animate {
    top: 0;
  }
  
  [animate="bg"].kp-animate {
    background-color: transparent;
  }
  
  [animate="grow"].kp-animate {
    height: 100%;
  }
  
  [animate="svg"].kp-animate {
    stroke-dashoffset: 0px;
  }