René's URL Explorer Experiment


Title: Animations  |  web.dev

Open Graph Title: Animations  |  web.dev

Description: Animation is a great way to highlight interactive elements, and add interest and fun to your designs. In this module, find out how to add and control animation effects with CSS.

Open Graph Description: Animation is a great way to highlight interactive elements, and add interest and fun to your designs. In this module, find out how to add and control animation effects with CSS.

Opengraph URL: https://web.dev/learn/css/animations

X: @ChromiumDev

direct link

Domain: web.dev

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:imagehttps://web.dev/static/images/social-wide.jpg
og:image:width1200
og:image:height675
og:localeen
twitter:cardsummary
twitter:imagehttps://web.dev/static/images/social-wide.jpg

Links:

Skip to main content https://web.dev/learn/css/animations#main-content
https://web.dev/
Resources https://web.dev/learn
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
https://web.dev/
Resources https://web.dev/learn
AI https://web.dev/learn/ai
Privacy https://web.dev/learn/privacy
Accessibility https://web.dev/learn/accessibility
HTML https://web.dev/learn/html
Images https://web.dev/learn/images
Responsive Design https://web.dev/learn/design
Forms https://web.dev/learn/forms
PWA https://web.dev/learn/pwa
CSS https://web.dev/learn/css
Performance https://web.dev/learn/performance
Testing https://web.dev/learn/testing
JavaScript https://web.dev/learn/javascript
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Welcome to Learn CSS!https://web.dev/learn/css/welcome
Box Modelhttps://web.dev/learn/css/box-model
Selectorshttps://web.dev/learn/css/selectors
Nestinghttps://web.dev/learn/css/nesting
The cascadehttps://web.dev/learn/css/the-cascade
Specificityhttps://web.dev/learn/css/specificity
Inheritancehttps://web.dev/learn/css/inheritance
Colorhttps://web.dev/learn/css/color
Sizing Unitshttps://web.dev/learn/css/sizing
Layouthttps://web.dev/learn/css/layout
Flexboxhttps://web.dev/learn/css/flexbox
Gridhttps://web.dev/learn/css/grid
Logical Propertieshttps://web.dev/learn/css/logical-properties
Custom Propertieshttps://web.dev/learn/css/custom-properties
Spacinghttps://web.dev/learn/css/spacing
Pseudo-elementshttps://web.dev/learn/css/pseudo-elements
Pseudo-classeshttps://web.dev/learn/css/pseudo-classes
Bordershttps://web.dev/learn/css/borders
Shadowshttps://web.dev/learn/css/shadows
Focushttps://web.dev/learn/css/focus
Cursors and pointershttps://web.dev/learn/css/cursors-and-pointers
Z-index and stacking contextshttps://web.dev/learn/css/z-index
Anchor positioninghttps://web.dev/learn/css/anchor-positioning
Popover and dialoghttps://web.dev/learn/css/popover-and-dialog
Functionshttps://web.dev/learn/css/functions
Paths, shapes, clipping, and maskinghttps://web.dev/learn/css/paths-shapes-clipping-masking
Gradientshttps://web.dev/learn/css/gradients
Animationshttps://web.dev/learn/css/animations
Filtershttps://web.dev/learn/css/filters
Blend Modeshttps://web.dev/learn/css/blend-modes
Listshttps://web.dev/learn/css/lists
Countershttps://web.dev/learn/css/counters
Transitionshttps://web.dev/learn/css/transitions
View Transitions for SPAshttps://web.dev/learn/css/view-transitions-spas
Overflowhttps://web.dev/learn/css/overflow
Backgroundshttps://web.dev/learn/css/backgrounds
Text and typographyhttps://web.dev/learn/css/typography
Container querieshttps://web.dev/learn/css/container-queries
Conclusion and next stepshttps://web.dev/learn/css/conclusion
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Read the announcementhttps://goo.gle/mwg-stable
web.dev https://web.dev/
Resources https://web.dev/learn
CSS https://web.dev/learn/css
The CSS Podcast - 022: Animation https://thecsspodcast.libsyn.com/022-animation
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@keyframes
@keyframeshttps://developer.mozilla.org/docs/Web/CSS/@keyframes
custom identifier (custom-ident)https://developer.mozilla.org/docs/Web/CSS/custom-ident
functionhttps://web.dev/learn/css/functions
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation
animationhttps://developer.mozilla.org/docs/Web/CSS/animation
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-duration
animation-durationhttps://developer.mozilla.org/docs/Web/CSS/animation-duration
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-timing-function
animation-timing-functionhttps://developer.mozilla.org/docs/Web/CSS/animation-timing-function
generatorhttps://cubic-bezier.com/
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-iteration-count
animation-iteration-counthttps://developer.mozilla.org/docs/Web/CSS/animation-iteration-count
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-direction
animation-directionhttps://developer.mozilla.org/docs/Web/CSS/animation-direction
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-delay
animation-delayhttps://developer.mozilla.org/docs/Web/CSS/animation-delay
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-play-state
animation-play-statehttps://developer.mozilla.org/docs/Web/CSS/animation-play-state
Sourcehttps://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-fill-mode
animation-fill-modehttps://developer.mozilla.org/docs/Web/CSS/animation-fill-mode
prefer reduced motionhttps://web.dev/articles/prefers-reduced-motion
prefers-reduced-motionhttps://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion
animation guidehttps://web.dev/explore/animations
Previous arrow_back Gradients https://web.dev/learn/css/gradients
Next Filters arrow_forward https://web.dev/learn/css/filters
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/learn/css/animations

Viewport: width=device-width, initial-scale=1


URLs of crawlers that visited me.