UNPKG

@hellouxpavel/cssanimation

Version:

A Powerful CSS Animation Library for Advanced Motion Design.

64 lines (54 loc) 1.54 kB
/*! * Module: blobElasticStretch Animation * Usage: <div class="cssanimation ca__fx-blobElasticStretch">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-blobElasticStretch { width: 70px; height: 70px; background: linear-gradient(45deg, #00f0ff, #0044ff); border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; animation: blobElasticStretch 2.8s ease-in-out infinite; } @keyframes blobElasticStretch { 0%, 100% { transform: translateY(0%) scale(1); } 25% { transform: translateY(-60%) scale(0.9, 1.3); border-radius: 50% 60% 40% 50% / 50% 40% 60% 50%; } 50% { transform: translateY(10%) scale(1.1, 0.8); border-radius: 60% 50% 50% 40% / 50% 50% 50% 60%; } }