@hellouxpavel/cssanimation/dist/modules/ca__ClipPath.css

A Powerful CSS Animation Library for Advanced Motion Design.

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}


:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -800px;
}


/**
 * Module: Clip Path Animations 
 * Filename: ca__Clip-Path.ca__fx-css
 */

.ca__fx-clipCircleExpandIn {
  animation: clipCircleExpandIn 3s ease-out;
  clip-path: circle(0% at 50% 50%);
}

@keyframes clipCircleExpandIn {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(150% at 50% 50%);
  }
}

.ca__fx-clipCircleCollapseOut {
  animation: clipCircleCollapseOut 3s ease-in both;
  clip-path: circle(150% at 50% 50%);
  will-change: clip-path;
}

@keyframes clipCircleCollapseOut {
  0% {
    clip-path: circle(150% at 50% 50%);
  }

  100% {
    clip-path: circle(0% at 50% 50%);
  }
}

.ca__fx-clipDiagonalWipeIn {
  animation-name: clipDiagonalWipeIn;
}

@keyframes clipDiagonalWipeIn {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}

.ca__fx-clipDiagonalWipeOut {
  animation-name: clipDiagonalWipeOut;
  animation-timing-function: ease-in-out;
}

@keyframes clipDiagonalWipeOut {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
    opacity: 0;
  }
}

.ca__fx-clipGridReveal {
  animation-name: clipGridReveal;
}

@keyframes clipGridReveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }

  40% {
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
    opacity: 0.ca__fx-5;
  }

  70% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.ca__fx-8;
  }

  100% {
    clip-path: inset(0);
    opacity: 1;
  }
}

.ca__fx-clipGridCollapse {
  animation-name: clipGridCollapse;
}

@keyframes clipGridCollapse {
  0% {
    clip-path: inset(0);
    opacity: 1;
  }

  40% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.ca__fx-5;
  }

  100% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }
}

.ca__fx-clipVerticalSplitIn {
  animation-name: clipVerticalSplitIn;
}

@keyframes clipVerticalSplitIn {
  0% {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    opacity: 0;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}

.ca__fx-clipVerticalSplitOut {
  animation: clipVerticalSplitOut 0.ca__fx-9s ease-in forwards;
}

@keyframes clipVerticalSplitOut {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    opacity: 0;
  }
}

.ca__fx-clipCrossSweepOut {
  animation: clipCrossSweepOut 1.ca__fx-1s ease-in forwards;
}

@keyframes clipCrossSweepOut {
  0% {
    clip-path: inset(0);
    opacity: 1;
  }

  60% {
    clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
    opacity: 0.ca__fx-6;
  }

  100% {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
  }
}

.ca__fx-clipBurstCircle {
  animation: clipBurstCircle 0.ca__fx-9s cubic-bezier(0.ca__fx-45, 0, 0.ca__fx-55, 1.ca__fx-5) both;
  clip-path: circle(0% at 50% 50%);
}

@keyframes clipBurstCircle {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }

  60% {
    clip-path: circle(60% at 50% 50%);
    opacity: 1;
  }

  100% {
    clip-path: circle(120% at 50% 50%);
  }
}

.ca__fx-clipDiamondIn {
  animation: clipDiamondIn 0.ca__fx-8s ease-out both;
}

@keyframes clipDiamondIn {
  0% {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0;
    transform: scale(0.ca__fx-6);
  }

  100% {
    clip-path: inset(0);
    opacity: 1;
    transform: scale(1);
  }
}

.ca__fx-clipDiagonalSliceIn {
  animation: clipDiagonalSliceIn 1s ease-out both;
}

@keyframes clipDiagonalSliceIn {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

.ca__fx-clipMultiStepReveal {
  animation: clipMultiStepReveal 1.ca__fx-1s ease-in-out both;
}

@keyframes clipMultiStepReveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }

  50% {
    clip-path: polygon(0 0, 80% 0, 80% 100%, 0 100%);
    opacity: 0.ca__fx-6;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

.ca__fx-clipMultiStepCollapse {
  animation: clipMultiStepCollapse 1.ca__fx-1s ease-in-out forwards;
}

@keyframes clipMultiStepCollapse {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }

  50% {
    clip-path: polygon(0 0, 80% 0, 80% 100%, 0 100%);
    opacity: 0.ca__fx-5;
  }

  100% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }
}

.ca__fx-clipAnimate {
  animation: morph 8s infinite ease-in-out alternate;
}

@keyframes morph {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Diamond */
  }

  50% {
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); /* Trapezoid */
  }

  100% {
    clip-path: polygon(0% 15%, 15% 0%, 100% 0%, 85% 15%, 100% 100%, 0% 100%); /* A complex star-like shape */
  }
}

.ca__fx-clipAnimateWave {
  animation: wave-morph 7s infinite ease-in-out alternate; /* Medium speed */
}

@keyframes wave-morph {
  0% {
    /* A gentle, slightly curved top and bottom */
    clip-path: polygon(
      0% 20%,
      10% 25%,
      20% 20%,
      30% 25%,
      40% 20%,
      50% 25%,
      60% 20%,
      70% 25%,
      80% 20%,
      90% 25%,
      100% 20%,
      100% 80%,
      90% 75%,
      80% 80%,
      70% 75%,
      60% 80%,
      50% 75%,
      40% 80%,
      30% 75%,
      20% 80%,
      10% 75%,
      0% 80%
    );
  }

  25% {
    /* More pronounced wave, expanding horizontally */
    clip-path: polygon(
      0% 0%,
      15% 10%,
      30% 0%,
      45% 10%,
      60% 0%,
      75% 10%,
      90% 0%,
      100% 10%,
      100% 90%,
      90% 100%,
      75% 90%,
      60% 100%,
      45% 90%,
      30% 100%,
      15% 90%,
      0% 100%
    );
  }

  50% {
    /* Reaching a flatter, more compressed state */
    clip-path: polygon(0% 30%, 100% 30%, 100% 70%, 0% 70%); /* A wide rectangle */
  }

  75% {
    /* Another wave pattern, perhaps inverted or shifted */
    clip-path: polygon(
      0% 10%,
      10% 0%,
      20% 10%,
      30% 0%,
      40% 10%,
      50% 0%,
      60% 10%,
      70% 0%,
      80% 10%,
      90% 0%,
      100% 10%,
      100% 90%,
      90% 100%,
      80% 90%,
      70% 100%,
      60% 90%,
      50% 100%,
      40% 90%,
      30% 100%,
      20% 90%,
      10% 100%,
      0% 90%
    );
  }

  100% {
    /* Back to the initial gentle wave */
    clip-path: polygon(
      0% 20%,
      10% 25%,
      20% 20%,
      30% 25%,
      40% 20%,
      50% 25%,
      60% 20%,
      70% 25%,
      80% 20%,
      90% 25%,
      100% 20%,
      100% 80%,
      90% 75%,
      80% 80%,
      70% 75%,
      60% 80%,
      50% 75%,
      40% 80%,
      30% 75%,
      20% 80%,
      10% 75%,
      0% 80%
    );
  }
}