Keyframe Offsets

Well aren't keyframe offsets just super handy! circle .animate ([ { offset : 0 , transform : 'scale(0)' , opacity : 1 } , { offset : .10 , transform : 'scale(1)' , opacity : 1 } , { offset : .75 , opacity : 1 } , { offset : 1 , opacity : 0 } , ]) See those useful offset values? In CSS # Keyframe percentages are super important in crafting animations; for both complex animations or just well orchestrated timings. You've probably seen the % values in the keyframes. #circle { animation : scale-then-fade-out 3 s ease infinite ; } @keyframes scale-then-fade-out { 0% { transform : scale (0) ; opacity : 1 ; } 10% { transform : scale (1) ; opacity : 1 ; } 75% { opacity : 1 ; } 100% { opacity : 0 ; } } They're pretty much 2nd nature. But I bet you've never thought to yourself, "Let me specify this keyframe offset value to 15%" 🤓 At least I hadn't, but I like the more formal name! So… what about in JS? In JS # In the animate function, the keyframes are passed as an array of objects, where each object is a keyframe. The logical place to put an offset value is right there! circle .animate ([ { offset : 0 , transform : 'scale(0)' , opacity : 1 } , { offset : .10 , transform : 'scale(1)' , opacity : 1 } , { offset : .75 , opacity : 1 } , { offset : 1 , opacity : 0 } , ] , { duration : 3000 , easing : 'ease' , iterations : Infinity , }) and there you have it, the tip in this article, how to set offsets in your JS keyframe animations. At least… that's why I wrote this. Was new to me! Try it out in this Codepen if you want to 🙂