| 1 | :host {
|
| 2 | --animation-fade-in: fade-in .5s var(--ease-3);
|
| 3 | --animation-fade-out: fade-out .5s var(--ease-3);
|
| 4 | --animation-scale-up: scale-up .5s var(--ease-3);
|
| 5 | --animation-scale-down: scale-down .5s var(--ease-3);
|
| 6 | --animation-slide-out-up: slide-out-up .5s var(--ease-3);
|
| 7 | --animation-slide-out-down: slide-out-down .5s var(--ease-3);
|
| 8 | --animation-slide-out-right: slide-out-right .5s var(--ease-3);
|
| 9 | --animation-slide-out-left: slide-out-left .5s var(--ease-3);
|
| 10 | --animation-slide-in-up: slide-in-up .5s var(--ease-3);
|
| 11 | --animation-slide-in-down: slide-in-down .5s var(--ease-3);
|
| 12 | --animation-slide-in-right: slide-in-right .5s var(--ease-3);
|
| 13 | --animation-slide-in-left: slide-in-left .5s var(--ease-3);
|
| 14 | --animation-shake-x: shake-x .75s var(--ease-out-5);
|
| 15 | --animation-shake-y: shake-y .75s var(--ease-out-5);
|
| 16 | --animation-spin: spin 2s linear infinite;
|
| 17 | --animation-ping: ping 5s var(--ease-out-3) infinite;
|
| 18 | --animation-blink: blink 1s var(--ease-out-3) infinite;
|
| 19 | --animation-float: float 3s var(--ease-in-out-3) infinite;
|
| 20 | --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
|
| 21 | --animation-pulse: pulse 2s var(--ease-out-3) infinite;
|
| 22 | }
|
| 23 |
|
| 24 | @keyframes fade-in {
|
| 25 | to { opacity: 1 }
|
| 26 | }
|
| 27 | @keyframes fade-out {
|
| 28 | to { opacity: 0 }
|
| 29 | }
|
| 30 | @keyframes scale-up {
|
| 31 | to { transform: scale(1.25) }
|
| 32 | }
|
| 33 | @keyframes scale-down {
|
| 34 | to { transform: scale(.75) }
|
| 35 | }
|
| 36 | @keyframes slide-out-up {
|
| 37 | to { transform: translateY(-100%) }
|
| 38 | }
|
| 39 | @keyframes slide-out-down {
|
| 40 | to { transform: translateY(100%) }
|
| 41 | }
|
| 42 | @keyframes slide-out-right {
|
| 43 | to { transform: translateX(100%) }
|
| 44 | }
|
| 45 | @keyframes slide-out-left {
|
| 46 | to { transform: translateX(-100%) }
|
| 47 | }
|
| 48 | @keyframes slide-in-up {
|
| 49 | from { transform: translateY(100%) }
|
| 50 | }
|
| 51 | @keyframes slide-in-down {
|
| 52 | from { transform: translateY(-100%) }
|
| 53 | }
|
| 54 | @keyframes slide-in-right {
|
| 55 | from { transform: translateX(-100%) }
|
| 56 | }
|
| 57 | @keyframes slide-in-left {
|
| 58 | from { transform: translateX(100%) }
|
| 59 | }
|
| 60 | @keyframes shake-x {
|
| 61 | 0%, 100% { transform: translateX(0%) }
|
| 62 | 20% { transform: translateX(-5%) }
|
| 63 | 40% { transform: translateX(5%) }
|
| 64 | 60% { transform: translateX(-5%) }
|
| 65 | 80% { transform: translateX(5%) }
|
| 66 | }
|
| 67 | @keyframes shake-y {
|
| 68 | 0%, 100% { transform: translateY(0%) }
|
| 69 | 20% { transform: translateY(-5%) }
|
| 70 | 40% { transform: translateY(5%) }
|
| 71 | 60% { transform: translateY(-5%) }
|
| 72 | 80% { transform: translateY(5%) }
|
| 73 | }
|
| 74 | @keyframes spin {
|
| 75 | to { transform: rotate(1turn) }
|
| 76 | }
|
| 77 | @keyframes ping {
|
| 78 | 90%, 100% {
|
| 79 | transform: scale(2);
|
| 80 | opacity: 0;
|
| 81 | }
|
| 82 | }
|
| 83 | @keyframes blink {
|
| 84 | 0%, 100% {
|
| 85 | opacity: 1
|
| 86 | }
|
| 87 | 50% {
|
| 88 | opacity: .5
|
| 89 | }
|
| 90 | }
|
| 91 | @keyframes float {
|
| 92 | 50% { transform: translateY(-25%) }
|
| 93 | }
|
| 94 | @keyframes bounce {
|
| 95 | 25% { transform: translateY(-20%) }
|
| 96 | 40% { transform: translateY(-3%) }
|
| 97 | 0%, 60%, 100% { transform: translateY(0) }
|
| 98 | }
|
| 99 | @keyframes pulse {
|
| 100 | 50% { transform: scale(.9,.9) }
|
| 101 | } |
| \ | No newline at end of file |