[animate] {
  opacity: 0;
}

[animate="none"],
[animate="parent"] {
  opacity: 1;
}

[animate="fade"] {
  transition: opacity var(--duration, 0.4s) ease-out var(--delay, 0.3s);
}

[animate="right"] {
  position: relative;
  left: var(--anim-left-start-pos, -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: 0px;
  overflow: hidden;
  transition: height var(--duration, 0.5s) ease-out var(--delay, 0.3s);
}

[animate="svg"] path {
  opacity: 1;
  stroke-dasharray: var(--offset, 1439px);
  stroke-dashoffset: var(--offset, 1439px);
  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: var(--anim-left-end-pos, 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 path {
  stroke-dashoffset: 0px;
}