UNPKG

@hellouxpavel/cssanimation

Version:

A Powerful CSS Animation Library for Advanced Motion Design.

83 lines (71 loc) 1.88 kB
/*! * Module: hangAndDropRight Animation * Usage: <div class="cssanimation ca__hangAndDropRight">Your Content</div> */ /* stylelint-disable */ :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; } .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; } } /* stylelint-enable */ .ca__fx-hangAndDropRight { animation-name: hangAndDropRight; transform-origin: right; backface-visibility: var(--cssanimation-backface-visibility); transform-style: var(--cssanimation-transform-style); will-change: var(--cssanimation-will-change); } @keyframes hangAndDropRight { 0% { transform: rotate(0); } 50% { transform: rotate(-100deg); } 60% { transform: rotate(-90deg); opacity: 1; } 90% { opacity: 0.4; filter: blur(2px); } 100% { transform: translateY(600%) rotate(-120deg) scale(0.95); opacity: 0; } } /** * Module: Hang On * Filename: ca__HangOn.css */ .ca__fx-hangOnLeft { animation-name: hangOnLeft; backface-visibility: var(--cssanimation-backface-visibility); transform-style: var(--cssanimation-transform-style); will-change: var(--cssanimation-will-change); transform-origin: left; }