Open carlysandler opened 2 years ago
css
`body { font-family: ui-sans-serif, sysetm-ui, sans-serif; margin: 0 auto; max-width: 60rem; padding: 2rem; } .btn { background-color: cornflowerblue; border: 0; border-radius: 0.25rem; color: #fff; display: inline-block; margin-block-end: 0.5rem; padding: 1rem; } .hidden { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(1px); display: block; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .circle { --bgc: cornflowerblue; --w: 150px; align-items: center; background-color: var(--bgc); border-radius: 50%; color: #fff; display: flex; height: var(--w); justify-content: center; margin-bottom: 1rem; width: var(--w); } .a-pulse { --animdur: 1s; --animn: pulse; will-change: transform; } .a-slide { --animdur: 3s; --animn: slide; } [data-animation] { animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running); }
/ KEYFRAMES / @keyframes opacity { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(0.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes slide { from { margin-left: 0%; } to { margin-left: calc(100% - var(--w, 150px)); } } `
component.js
/* Toggle Animations */ const jstoggle = document.getElementById('js-toggle'); jstoggle.addEventListener('click', () => { const animations = document.querySelectorAll('[data-animation'); animations.forEach(animation => { const running = animation.style.animationPlayState || 'running'; animation.style.animationPlayState = running === 'running' ? 'paused' : 'running'; }) });
css
`body { font-family: ui-sans-serif, sysetm-ui, sans-serif; margin: 0 auto; max-width: 60rem; padding: 2rem; } .btn { background-color: cornflowerblue; border: 0; border-radius: 0.25rem; color: #fff; display: inline-block; margin-block-end: 0.5rem; padding: 1rem; } .hidden { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(1px); display: block; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .circle { --bgc: cornflowerblue; --w: 150px; align-items: center; background-color: var(--bgc); border-radius: 50%; color: #fff; display: flex; height: var(--w); justify-content: center; margin-bottom: 1rem; width: var(--w); } .a-pulse { --animdur: 1s; --animn: pulse; will-change: transform; } .a-slide { --animdur: 3s; --animn: slide; } [data-animation] { animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running); }
/ KEYFRAMES / @keyframes opacity { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(0.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes slide { from { margin-left: 0%; } to { margin-left: calc(100% - var(--w, 150px)); } } `
component.js
/* Toggle Animations */ const jstoggle = document.getElementById('js-toggle'); jstoggle.addEventListener('click', () => { const animations = document.querySelectorAll('[data-animation'); animations.forEach(animation => { const running = animation.style.animationPlayState || 'running'; animation.style.animationPlayState = running === 'running' ? 'paused' : 'running'; }) });