{
  "$type": "site.standard.document",
  "description": "The percentages you can pass to CSS and JS for keyframe timing.",
  "path": "/keyframe-offsets",
  "publishedAt": "2025-09-05T22:31:33.790Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css",
    "js"
  ],
  "textContent": "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 🙂",
  "title": "Keyframe Offsets"
}