UNPKG

@hellouxpavel/cssanimation

Version:

A Powerful CSS Animation Library for Advanced Motion Design.

203 lines (165 loc) 3.37 kB
.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: Text Animation * Filename: ca__text.ca__fx-css */ .ca__fx-effect3d { animation-name: effect3d; } @keyframes effect3d { to { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgb(0 0 0 / 10%), 0 0 5px rgb(0 0 0 / 10%), 0 1px 3px rgb(0 0 0 / 30%), 0 3px 5px rgb(0 0 0 / 20%), 0 5px 10px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 20%), 0 20px 20px rgb(0 0 0 / 15%); } } .ca__fx-spring { animation-name: springy; } @keyframes springy { 0% { transform: scale(1); } 30% { transform: scale(1.ca__fx-4, 0.ca__fx-6); } 50% { transform: scale(0.ca__fx-8, 1.ca__fx-3); } 70% { transform: scale(1.ca__fx-2, 0.ca__fx-8); } 100% { transform: scale(1); } } .ca__fx-neonGlow { animation: neonGlow 1.ca__fx-5s ease-in-out infinite; } @keyframes neonGlow { 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 20px #f0f; } 50% { text-shadow: 0 0 10px #fff, 0 0 20px #0ff, 0 0 30px #0ff; } } .ca__fx-colorPulse { animation: colorPulse 2s ease-in-out infinite; } @keyframes colorPulse { 0%, 100% { color: #fff; } 50% { color: #ff4081; } } .ca__fx-trackExpand { animation-name: trackExpand; } @keyframes trackExpand { 0% { transform: translateX(0); letter-spacing: 0; } 100% { transform: translateX(5px); letter-spacing: 0.ca__fx-5em; } } .ca__fx-trackCollapse { animation-name: trackCollapse; } @keyframes trackCollapse { 0% { transform: translateX(5px); letter-spacing: 0.ca__fx-5em; } 100% { transform: translateX(0); letter-spacing: 0; } } .ca__fx-gradientText { background: linear-gradient(90deg, #ff0080, #7928ca); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientText 3s linear infinite; background-size: 200%; } @keyframes gradientText { 0% { background-position: 0%; } 100% { background-position: 200%; } } .ca__fx-rainbowText { animation: rainbow 3s linear infinite; } @keyframes rainbow { 0% { color: red; } 20% { color: orange; } 40% { color: yellow; } 60% { color: green; } 80% { color: blue; } 100% { color: violet; } }