animations
1 month ago
frontblocks-text-animation-frontend.js
1 month ago
frontblocks-text-animation-option.jsx
1 month ago
frontblocks-text-animation.css
1 month ago
frontblocks-text-animation.js
1 month ago
frontblocks-text-animation.css
267 lines
| 1 | .wp-block-frontblocks-text-animation.frbl-text-animation { |
| 2 | display: block; |
| 3 | width: fit-content; |
| 4 | margin-left: 0; |
| 5 | margin-right: auto; |
| 6 | color: var(--frbl-color); |
| 7 | transition: color 0.3s ease; |
| 8 | } |
| 9 | |
| 10 | .frbl-text-animation { |
| 11 | color: var(--frbl-color); |
| 12 | transition: color 0.3s ease; |
| 13 | } |
| 14 | |
| 15 | .wp-block-frontblocks-text-animation.frbl-text-animation:hover { |
| 16 | color: var(--frbl-color-hover); |
| 17 | } |
| 18 | |
| 19 | span.frbl-text-animation { |
| 20 | display: inline; |
| 21 | } |
| 22 | |
| 23 | /* Editor: align font-size number + unit select to same height */ |
| 24 | .block-editor-block-inspector .frbl-fontsize-row { |
| 25 | display: flex; |
| 26 | gap: 8px; |
| 27 | align-items: stretch; |
| 28 | } |
| 29 | |
| 30 | .block-editor-block-inspector .frbl-fontsize-row .components-base-control, |
| 31 | .block-editor-block-inspector .frbl-fontsize-row .components-select-control__input { |
| 32 | margin-bottom: 0 !important; |
| 33 | } |
| 34 | |
| 35 | /* ── Animation: char base ── */ |
| 36 | .frbl-text-animation .frbl-char { |
| 37 | display: inline-block; |
| 38 | white-space: pre; |
| 39 | } |
| 40 | |
| 41 | /* ── Fade In ── */ |
| 42 | @keyframes frblFadeIn { |
| 43 | from { opacity: 0; } |
| 44 | to { opacity: 1; } |
| 45 | } |
| 46 | |
| 47 | /* ── Rotate In ── */ |
| 48 | @keyframes frblRotateIn { |
| 49 | from { transform: rotate( -180deg ) scale( 0 ); opacity: 0; } |
| 50 | to { transform: rotate( 0deg ) scale( 1 ); opacity: 1; } |
| 51 | } |
| 52 | |
| 53 | /* ── Flip In ── */ |
| 54 | @keyframes frblFlipIn { |
| 55 | from { transform: perspective( 400px ) rotateY( -90deg ); opacity: 0; transform-origin: left; } |
| 56 | to { transform: perspective( 400px ) rotateY( 0deg ); opacity: 1; transform-origin: left; } |
| 57 | } |
| 58 | |
| 59 | /* ── Bounce In ── */ |
| 60 | @keyframes frblBounceIn { |
| 61 | 0% { transform: translateY( -50px ); opacity: 0; animation-timing-function: cubic-bezier( 0.8, 0, 1, 1 ); } |
| 62 | 50% { transform: translateY( 15px ); opacity: 1; animation-timing-function: cubic-bezier( 0, 0, 0.2, 1 ); } |
| 63 | 75% { transform: translateY( -5px ); opacity: 1; animation-timing-function: cubic-bezier( 0.8, 0, 1, 1 ); } |
| 64 | 100% { transform: translateY( 0 ); opacity: 1; } |
| 65 | } |
| 66 | |
| 67 | /* ── Glow In ── */ |
| 68 | @keyframes frblGlowIn { |
| 69 | 0% { opacity: 0; text-shadow: 0 0 0px transparent; } |
| 70 | 50% { opacity: 1; text-shadow: 0 0 20px currentColor; } |
| 71 | 100% { opacity: 1; text-shadow: 0 0 0px transparent; } |
| 72 | } |
| 73 | |
| 74 | /* ── Blur In ── */ |
| 75 | @keyframes frblBlurIn { |
| 76 | from { filter: blur( 12px ); opacity: 0; transform: scale( 1.1 ); } |
| 77 | to { filter: blur( 0 ); opacity: 1; transform: scale( 1 ); } |
| 78 | } |
| 79 | |
| 80 | /* ── Scale In ── */ |
| 81 | @keyframes frblScaleIn { |
| 82 | from { transform: scale( 0 ); opacity: 0; } |
| 83 | to { transform: scale( 1 ); opacity: 1; } |
| 84 | } |
| 85 | |
| 86 | /* ── Slide Up ── */ |
| 87 | @keyframes frblSlideUp { |
| 88 | from { transform: translateY( 100% ); opacity: 0; } |
| 89 | to { transform: translateY( 0 ); opacity: 1; } |
| 90 | } |
| 91 | |
| 92 | /* ── Slide Down ── */ |
| 93 | @keyframes frblSlideDown { |
| 94 | from { transform: translateY( -100% ); opacity: 0; } |
| 95 | to { transform: translateY( 0 ); opacity: 1; } |
| 96 | } |
| 97 | |
| 98 | /* ── Slide Left ── */ |
| 99 | @keyframes frblSlideLeft { |
| 100 | from { transform: translateX( -100% ); opacity: 0; } |
| 101 | to { transform: translateX( 0 ); opacity: 1; } |
| 102 | } |
| 103 | |
| 104 | /* ── Slide Right ── */ |
| 105 | @keyframes frblSlideRight { |
| 106 | from { transform: translateX( 100% ); opacity: 0; } |
| 107 | to { transform: translateX( 0 ); opacity: 1; } |
| 108 | } |
| 109 | |
| 110 | /* ── Drop In ── */ |
| 111 | @keyframes frblDropIn { |
| 112 | 0% { transform: translateY( -200% ); opacity: 0; } |
| 113 | 60% { transform: translateY( 20% ); opacity: 1; } |
| 114 | 80% { transform: translateY( -10% ); opacity: 1; } |
| 115 | 100% { transform: translateY( 0 ); opacity: 1; } |
| 116 | } |
| 117 | |
| 118 | /* ── Shadow Pop ── */ |
| 119 | @keyframes frblShadowPop { |
| 120 | 0% { |
| 121 | text-shadow: 0 0 rgba( 0,0,0,0 ); |
| 122 | transform: translateX( 0 ) translateY( 0 ); |
| 123 | opacity: 0; |
| 124 | } |
| 125 | 100% { |
| 126 | text-shadow: |
| 127 | 1px 1px rgba( 0,0,0,0.35 ), |
| 128 | 2px 2px rgba( 0,0,0,0.35 ), |
| 129 | 3px 3px rgba( 0,0,0,0.35 ), |
| 130 | 4px 4px rgba( 0,0,0,0.35 ); |
| 131 | transform: translateX( -4px ) translateY( -4px ); |
| 132 | opacity: 1; |
| 133 | } |
| 134 | } |
| 135 | |
| 136 | /* ── Pulse Neon ── */ |
| 137 | @keyframes frblPulseNeon { |
| 138 | 0%, 100% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px #0ff; opacity: 1; } |
| 139 | 50% { text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 10px #0ff; opacity: 0.5; } |
| 140 | } |
| 141 | |
| 142 | /* ── Water Drop ── */ |
| 143 | @keyframes frblWaterDrop { |
| 144 | 0% { transform: translateY( -100px ) scale( 0.1, 2 ); opacity: 0; } |
| 145 | 50% { transform: translateY( 0 ) scale( 1.5, 0.5 ); opacity: 1; } |
| 146 | 100% { transform: translateY( 0 ) scale( 1, 1 ); opacity: 1; } |
| 147 | } |
| 148 | |
| 149 | /* ── Glitch RGB ── */ |
| 150 | @keyframes frblGlitchRGB { |
| 151 | 0% { text-shadow: 2px 0 0 red, -2px 0 0 blue; opacity: 0; } |
| 152 | 20% { text-shadow: -2px 0 0 red, 2px 0 0 blue; opacity: 1; } |
| 153 | 40% { text-shadow: 2px 0 0 red, -2px 0 0 blue; } |
| 154 | 60% { text-shadow: -2px 0 0 red, 2px 0 0 blue; } |
| 155 | 80% { text-shadow: 1px 0 0 red, -1px 0 0 blue; } |
| 156 | 100% { text-shadow: 0px 0 0 transparent; opacity: 1; } |
| 157 | } |
| 158 | |
| 159 | /* ── Solid To Outline ── */ |
| 160 | @keyframes frblSolidOutline { |
| 161 | 0% { -webkit-text-stroke: 0px transparent; color: var( --frbl-stroke-color ); opacity: 0; } |
| 162 | 50% { -webkit-text-stroke: 0px transparent; color: var( --frbl-stroke-color ); opacity: 1; } |
| 163 | 100% { -webkit-text-stroke: 1px var( --frbl-stroke-color ); color: transparent; opacity: 1; } |
| 164 | } |
| 165 | |
| 166 | /* ── Terminal Type cursor ── */ |
| 167 | @keyframes frblBlinkCursor { |
| 168 | 0%, 100% { opacity: 1; } |
| 169 | 50% { opacity: 0; } |
| 170 | } |
| 171 | |
| 172 | /* ── Tracking Expand ── */ |
| 173 | @keyframes frblTrackingExpand { |
| 174 | from { letter-spacing: -0.5em; opacity: 0; } |
| 175 | to { letter-spacing: 0.05em; opacity: 1; } |
| 176 | } |
| 177 | |
| 178 | /* ── Flicker ── */ |
| 179 | @keyframes frblFlicker { |
| 180 | 0%, 2%, 4%, 8%, 12%, 16%, 20% { opacity: 0; } |
| 181 | 1%, 3%, 5%, 9%, 13%, 17%, 21%, 100% { opacity: 1; } |
| 182 | } |
| 183 | |
| 184 | /* ── Glitch ── */ |
| 185 | @keyframes frblGlitch { |
| 186 | 0% { transform: translate( 0 ); opacity: 0; } |
| 187 | 10% { transform: translate( -2px, 2px ); opacity: 1; } |
| 188 | 20% { transform: translate( -2px, -2px ); opacity: 1; } |
| 189 | 30% { transform: translate( 2px, 2px ); opacity: 1; } |
| 190 | 40% { transform: translate( 2px, -2px ); opacity: 1; } |
| 191 | 50% { transform: translate( -2px, 2px ); opacity: 1; } |
| 192 | 60% { transform: translate( -2px, -2px ); opacity: 1; } |
| 193 | 70% { transform: translate( 2px, 2px ); opacity: 1; } |
| 194 | 80% { transform: translate( 2px, -2px ); opacity: 1; } |
| 195 | 90% { transform: translate( -2px, 2px ); opacity: 1; } |
| 196 | 100% { transform: translate( 0 ); opacity: 1; } |
| 197 | } |
| 198 | |
| 199 | /* ── Roll In ── */ |
| 200 | @keyframes frblRollIn { |
| 201 | from { transform: translateX( -100% ) rotate( -120deg ); opacity: 0; } |
| 202 | to { transform: translateX( 0 ) rotate( 0deg ); opacity: 1; } |
| 203 | } |
| 204 | |
| 205 | /* ── Squeeze ── */ |
| 206 | @keyframes frblSqueeze { |
| 207 | 0% { transform: scaleY( 1 ); opacity: 0; } |
| 208 | 50% { transform: scaleY( 0.5 ); opacity: 1; } |
| 209 | 100% { transform: scaleY( 1 ); opacity: 1; } |
| 210 | } |
| 211 | |
| 212 | /* ── Stretch ── */ |
| 213 | @keyframes frblStretch { |
| 214 | 0% { transform: scaleX( 1 ); opacity: 0; } |
| 215 | 50% { transform: scaleX( 1.5 ); opacity: 1; } |
| 216 | 100% { transform: scaleX( 1 ); opacity: 1; } |
| 217 | } |
| 218 | |
| 219 | /* ── Wave ── */ |
| 220 | @keyframes frblWave { |
| 221 | 0%, 100% { transform: translateY( 0 ); opacity: 1; } |
| 222 | 50% { transform: translateY( -15px ); opacity: 1; } |
| 223 | } |
| 224 | |
| 225 | /* ── Rubber Band ── */ |
| 226 | @keyframes frblRubberBand { |
| 227 | 0% { transform: scale( 1 ); opacity: 0; } |
| 228 | 30% { transform: scaleX( 1.25 ) scaleY( 0.75 ); opacity: 1; } |
| 229 | 40% { transform: scaleX( 0.75 ) scaleY( 1.25 ); opacity: 1; } |
| 230 | 50% { transform: scaleX( 1.15 ) scaleY( 0.85 ); opacity: 1; } |
| 231 | 65% { transform: scaleX( 0.95 ) scaleY( 1.05 ); opacity: 1; } |
| 232 | 75% { transform: scaleX( 1.05 ) scaleY( 0.95 ); opacity: 1; } |
| 233 | 100% { transform: scale( 1 ); opacity: 1; } |
| 234 | } |
| 235 | |
| 236 | /* ── Flash ── */ |
| 237 | @keyframes frblFlash { |
| 238 | 0%, 50%, 100% { opacity: 1; } |
| 239 | 25%, 75% { opacity: 0; } |
| 240 | } |
| 241 | |
| 242 | /* ── Pulse ── */ |
| 243 | @keyframes frblPulse { |
| 244 | 0% { transform: scale( 1 ); opacity: 0; } |
| 245 | 50% { transform: scale( 1.2 ); opacity: 1; } |
| 246 | 100% { transform: scale( 1 ); opacity: 1; } |
| 247 | } |
| 248 | |
| 249 | /* ── Swing ── */ |
| 250 | @keyframes frblSwing { |
| 251 | 0% { opacity: 0; transform: rotate( 15deg ); } |
| 252 | 20% { opacity: 1; transform: rotate( 15deg ); } |
| 253 | 40% { opacity: 1; transform: rotate( -10deg ); } |
| 254 | 60% { opacity: 1; transform: rotate( 5deg ); } |
| 255 | 80% { opacity: 1; transform: rotate( -5deg ); } |
| 256 | 100% { opacity: 1; transform: rotate( 0deg ); } |
| 257 | } |
| 258 | |
| 259 | /* Respect reduced motion */ |
| 260 | @media ( prefers-reduced-motion: reduce ) { |
| 261 | .frbl-text-animation, |
| 262 | .frbl-text-animation * { |
| 263 | animation: none !important; |
| 264 | transition: none !important; |
| 265 | } |
| 266 | } |
| 267 |