A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.<\/p>\n
The trick is custom properties that control the movement:<\/p>\n
body {\r\n --toggle: 0;\r\n --playState: \"paused\";\r\n}<\/code><\/pre>\nWhich are used within animations and transitions:<\/p>\n
.animation {\r\n animation: bobble 2s infinite;\r\n animation-play-state: var(--playState);\r\n}\r\n\r\n.transition {\r\n transition: transform calc(var(--toggle) * .15s) ease-in-out;\r\n}<\/code><\/pre>\n<\/p>\n
And toggle-able by JavaScript:<\/p>\n
\/\/ stop animation\r\ndocument.body.style.setProperty(\"--toggle\", \"0\");\r\ndocument.body.style.setProperty(\"--playState\", \"paused\");\r\n\r\n\/\/ play animation\r\ndocument.body.style.setProperty(\"--toggle\", \"1\");\r\ndocument.body.style.setProperty(\"--playState\", \"running\");<\/code><\/pre>\nThen get into using the media query to test for reduced motion off the bat, and storing the preferred value in localStorage<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not. The trick is custom properties that control the movement: body { –toggle: 0; –playState: “paused”; } Which are used within animations and transitions: .animation { animation: bobble 2s infinite; animation-play-state: […]<\/p>\n","protected":false},"author":3,"featured_media":281070,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[466,612,1036],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/smiley-circle.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":332679,"url":"https:\/\/css-tricks.com\/how-to-play-and-pause-css-animations-with-css-custom-properties\/","url_meta":{"origin":281058,"position":0},"title":"How to Play and Pause CSS Animations with CSS Custom Properties","date":"January 21, 2021","format":false,"excerpt":"Let\u2019s have a look CSS @keyframes animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, but there is plenty of nuance to get into in the details. We\u2019ll also look at my preferred\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/circles-colors.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253235,"url":"https:\/\/css-tricks.com\/building-performant-expand-collapse-animations\/","url_meta":{"origin":281058,"position":1},"title":"Building Performant Expand & Collapse Animations","date":"March 29, 2017","format":false,"excerpt":"It's starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run a high risk of that animation\/transition being choppy. Fortunately, there is a ton of animation possibility with those properties, especially since transform can move\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372850,"url":"https:\/\/css-tricks.com\/hacking-css-animation-state-and-playback-time\/","url_meta":{"origin":281058,"position":2},"title":"Hacking CSS Animation State and Playback Time","date":"September 6, 2022","format":false,"excerpt":"CSS-only Wolfenstein is a little project that I made a few weeks ago. It was an experiment with CSS 3D transformations and animations. Inspired by the FPS demo and another Wolfenstein CodePen, I decided to build my own version. It is loosely based on Episode 1 - Floor 9 of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/hacking-css-animations.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":149995,"url":"https:\/\/css-tricks.com\/controlling-css-animations-transitions-javascript\/","url_meta":{"origin":281058,"position":3},"title":"Controlling CSS Animations and Transitions with JavaScript","date":"September 17, 2013","format":false,"excerpt":"The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":360781,"url":"https:\/\/css-tricks.com\/making-your-first-custom-svelte-transition\/","url_meta":{"origin":281058,"position":4},"title":"How to Build Your First Custom Svelte Transition","date":"January 14, 2022","format":false,"excerpt":"The Svelte transition API provides a first-class way to animate your components when they enter or leave the document, including custom Svelte transitions. By default, the transition directive uses CSS animations, which generally offer better performance and allow the browser\u2019s main thread to remain unblocked. The API is as simple\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/svelte-spring.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304747,"url":"https:\/\/css-tricks.com\/performant-expandable-animations-building-keyframes-on-the-fly\/","url_meta":{"origin":281058,"position":5},"title":"Performant Expandable Animations: Building Keyframes on the Fly","date":"April 1, 2020","format":false,"excerpt":"Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve the majority of uses cases. However, there are some animations that require a little bit more work. You probably know that animations should run on the composite\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/expandable-section.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281058"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=281058"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281058\/revisions"}],"predecessor-version":[{"id":281069,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281058\/revisions\/281069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/281070"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=281058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=281058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=281058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}