![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/progbar.png?resize=473%2C112\" "\\"progbar\\"")
<\/p>\nYou already know that inline styles are “bad practice.” Inline styles aren’t reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn’t. There are some instances where inline styles make perfect sense. Perhaps you have an application where user’s pick their favorite color, and then you set the background of the body to that. Using an inline style in that case is actually more efficient than external CSS, since it’s specific to one user and one element.<\/p>\n
Now let’s say you want to animate to a value set in an inline style. Say you want to animate a progress bar. You start at zero, and need to go up to any arbitrary value. Perhaps a call to the server tells you how complete an upload is and you set the value from that. <\/p>\n
<\/p>\n
In a post I did nearly a year ago<\/a>, I lamented that you can’t animate to an inline style. You can’t declare a keyframe in inline styles and you don’t know what final value to animate to in the external CSS. Alas I was wrong, as I didn’t know about this bonafide little CSS trick.<\/p>\n Here’s the trick: just omit the Then you call the animation on the progress bar:<\/p>\n And just like that, the progress bar will animate itself up to the value set by the inline style.<\/p>\n See the Pen Animate to an Inline Style<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n Special thanks to Michael Paryna who emailed me about this and got me to give it a try.<\/p>\n","protected":false},"excerpt":{"rendered":" You already know that inline styles are “bad practice.” Inline styles aren’t reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn’t.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":342358,"url":"https:\/\/css-tricks.com\/inline-styles-as-classes-lol\/","url_meta":{"origin":16083,"position":0},"title":"Inline Styles as Classes (lol)","date":"June 16, 2021","format":false,"excerpt":"If you're abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box. https:\/\/twitter.com\/samthor\/status\/1402825668061130755 OK lemme dig in and totally ruin the joke. First off, it's a joke, so\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/E3fWebBVUAQOoaZ.png?fit=620%2C480&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336933,"url":"https:\/\/css-tricks.com\/want-to-write-a-hover-effect-with-inline-css-use-css-variables\/","url_meta":{"origin":16083,"position":1},"title":"Want to Write a Hover Effect With Inline CSS? Use CSS Variables.","date":"March 26, 2021","format":false,"excerpt":"The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that color in the CMS when they\u2019re writing the post. Just a super-light layer of art direction. To make that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/button-hover.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342925,"url":"https:\/\/css-tricks.com\/if-were-gonna-criticize-utility-class-frameworks-lets-be-fair-about-it\/","url_meta":{"origin":16083,"position":2},"title":"If we’re gonna criticize utility-class frameworks, let’s be fair about it","date":"June 22, 2021","format":false,"excerpt":"I'm not here to raise a shield protecting CSS utility frameworks. I don't even particularly like the approach, myself, and nothing is above fair criticism. But fair is a key word there. I can't tell you how many times I've seen utility styles compared to inline styles. Sarah Dayan is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/class-vs-inline-style-html.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332360,"url":"https:\/\/css-tricks.com\/two-issues-styling-the-details-element-and-how-to-solve-them\/","url_meta":{"origin":16083,"position":3},"title":"Two Issues Styling the Details Element and How to Solve Them","date":"January 13, 2021","format":false,"excerpt":"In the not-too-distant past, even basic accordion-like interactions required JavaScript event listeners or some CSS\u2026 trickery. And, depending on the solution used, editing the underlying HTML could get complicated. Now, the <div class=\"progress-bar\">\r\n <div style=\"width: 75%\">Upload is 75% complete.<\/div>\r\n<\/div><\/code><\/pre>\nto<\/code> or 100%<\/code> declaration from the @keyframe:<\/p>\n@-webkit-keyframes progress-bar {\r\n 0% { width: 0; }\r\n}\r\n@-moz-keyframes progress-bar {\r\n 0% { width: 0; }\r\n}\r\nkeyframes progress-bar {\r\n 0% { width: 0; }\r\n}<\/code><\/pre>\n.progress-bar > div { \r\n -webkit-animation: progress-bar 2s;\r\n -moz-animation: progress-bar 2s;\r\n animation: progress-bar 2s;\r\n}<\/code><\/pre>\n and elements (which combine to form what\u2019s called a \u201cdisclosure widget\u201d) have made creation and maintenance of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/details-summary-issues.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":8518,"url":"https:\/\/css-tricks.com\/css3-progress-bars\/","url_meta":{"origin":16083,"position":4},"title":"CSS Progress Bars","date":"February 24, 2011","format":false,"excerpt":"Just a fun experiment creating progress bars made with just CSS3 (no images). Loads of progressive nerdery packed into one little element.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/02\/progressbars-fullexperience.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":168883,"url":"https:\/\/css-tricks.com\/improving-ui-animation-workflow-velocity-js\/","url_meta":{"origin":16083,"position":5},"title":"Improving UI Animation Workflow with Velocity.js","date":"April 30, 2014","format":false,"excerpt":"The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh's blog, a topic we've covered here as well. In this article, Julian introduces Velocity.js itself.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16083"}],"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=16083"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16083\/revisions"}],"predecessor-version":[{"id":181284,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16083\/revisions\/181284"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=16083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}