Cassie Evans PRO
Brighton based front-end dev & designer. disOrganiser @GeneratorBtn. Has a particular fondness for web animation.
⚠️ MOTION WARNING ⚠️
⚠️ MOTION WARNING ⚠️
⚠️ MOTION WARNING ⚠️
/* Define your keyframes */ @keyframes scale-progressbar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Define a scroll-timeline */ @scroll-timeline progressbar-timeline { time-range: 1s; } /* Reference the keyframes and set scroll-timeline as the driver for the animation */ .progressbar-element { animation: 1s linear forwards scale-progressbar; animation-timeline: progressbar-timeline; }
/* Define your keyframes */ @keyframes scale-progressbar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Define a scroll-timeline */ @scroll-timeline progressbar-timeline { time-range: 1s; } /* Reference the keyframes and set scroll-timeline as the driver for the animation */ .progressbar-element { animation: 1s linear forwards scale-progressbar; animation-timeline: progressbar-timeline; }
/* Define your keyframes */ @keyframes scale-progressbar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Define a scroll-timeline */ @scroll-timeline progressbar-timeline { time-range: 1s; } /* Reference the keyframes and set scroll-timeline as the driver for the animation */ .progressbar-element { animation: 1s linear forwards scale-progressbar; animation-timeline: progressbar-timeline; }
/* Define your keyframes */ @keyframes scale-progressbar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Define a scroll-timeline */ @scroll-timeline progressbar-timeline { time-range: 1s; } /* Reference the keyframes and set scroll-timeline as the driver for the animation */ .progressbar-element { animation: 1s linear forwards scale-progressbar; animation-timeline: progressbar-timeline; }
By Cassie Evans
Brighton based front-end dev & designer. disOrganiser @GeneratorBtn. Has a particular fondness for web animation.