--- title: Patterns | daily.dev description: A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these... canonical: https://daily.dev/posts/patterns-tjtxlzw2b twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Patterns | daily.dev og:description: A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these... og:url: https://daily.dev/posts/patterns-tjtxlzw2b og:image: https://api.daily.dev/og/posts/tjTxlZW2b.png og:image:alt: Patterns og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Patterns **[Community Picks](https://daily.dev/sources/community)** · 1 min read · 327 upvotes · 11 comments ## Summary A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these examples to help ensure your projects stay on the right track. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@soumyadeepdey** · 3 upvotes > Its good **@jpknackroot** · 2 upvotes > Nice site **@wosorto** · 1 upvotes > Interesting **@shubhsharma19** · 1 upvotes > Love this! **@bigjpg** · 1 upvotes > What a well-developed and presented site ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/patterns-tjtxlzw2b) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Patterns","url":"https://daily.dev/posts/patterns-tjtxlzw2b","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/patterns-tjtxlzw2b"},"datePublished":"2023-06-28T08:22:05.344Z","dateModified":"2023-12-07T12:02:45.284Z","description":"A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/45341080b8df0ec4f96000c4207e5e42?_a=AQADKdt","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/45341080b8df0ec4f96000c4207e5e42?_a=AQADKdt","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":11,"discussionUrl":"https://daily.dev/posts/patterns-tjtxlzw2b","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":327},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":11}],"keywords":"webdev,javascript,css,accessibility","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"Patterns"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/patterns-tjtxlzw2b","comment":[{"@type":"Comment","text":"Its good","datePublished":"2023-07-01T05:02:12.912Z","url":"https://daily.dev/posts/tjTxlZW2b#c-tHI0ZMNTG","author":{"@type":"Person","name":"Soumyadeep Dey","url":"https://daily.dev/soumyadeepdey","image":"https://media.daily.dev/image/upload/s--GfefdvsB--/f_auto/v1709693096/avatars/avatar_rRJePU0mYpni6PSKKl6Ov"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Nice site","datePublished":"2023-06-28T12:38:16.305Z","url":"https://daily.dev/posts/tjTxlZW2b#c-YDfOlTxR4","author":{"@type":"Person","name":"jayendra","url":"https://daily.dev/jpknackroot","image":"https://lh3.googleusercontent.com/a/AAcHTtftKPbr0NfRNkY0xnbToePim6GqcNzOhN3nZwC7=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Interesting","datePublished":"2023-06-30T14:15:51.613Z","url":"https://daily.dev/posts/tjTxlZW2b#c-HYqzBUMpV","author":{"@type":"Person","name":"Willy Osorto","url":"https://daily.dev/wosorto","image":"https://lh3.googleusercontent.com/a-/AFdZuconrUHYr3RUW0Yzn1xnq4LUTE6cgSmug8hQxUCCmw=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Love this!","datePublished":"2023-07-03T16:17:13.397Z","url":"https://daily.dev/posts/tjTxlZW2b#c-96tBSjnRa","author":{"@type":"Person","name":"Shubh Sharma","url":"https://daily.dev/shubhsharma19","image":"https://avatars.githubusercontent.com/u/69891912?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"What a well-developed and presented site","datePublished":"2023-06-29T06:33:43.534Z","url":"https://daily.dev/posts/tjTxlZW2b#c-sIFNjBABp","author":{"@type":"Person","name":"Ross Farrell","url":"https://daily.dev/bigjpg","image":"https://avatars.githubusercontent.com/u/56429528?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```