What are CSS Animations? A Beginner's Guide
Whether it’s bouncing buttons or flipping cards, CSS animation makes websites feel more interactive. CSS animations are a set of CSS properties you can use to add simple to complex animations on a website elements.
You can animate HTML elements on a website using CSS animations and CSS transitions properties. With CSS animation, style values change smoothly, instead of changing instantaneously.
As you embark on animating your website elements, you will encounter these css animation style:
- CSS transitions for basic animations
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- CSS animations for more advanced animations
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
What can you animate with CSS ANIMATION?
Some of the CSS properties you can animate with CSS animation and CSS transition are:
- accent-color
- all
- backdrop-filter
- background
- block-size
- border
- bottom
- box-shadow
- caret-color
- clip
- color
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-width
- column-width
- columns
- filter
- flex
- flex-basis
- flex-grow
- flex-shrink
- font
- gap
- grid-column-gap
- grid-gap
- grid-row-gap
- grid-template-columns
- grid-template-rows
- height
- inline-size
- inset
- left
- letter-spacing
- line-clamp
- line-height
- margin
- mask
- max-block-size
- max-height
- max-inline-size
- max-lines
- max-width
- min-block-size
- min-height
- min-inline-size
- min-width
- object-position
- offset
- opacity
- order
- outline
- padding
- perspective
- perspective-origin
- right
- rotate
- row-gap
- scale
- scroll-margin
- scroll-padding
- scroll-snap-coordinate
- scroll-snap-destination
- scrollbar-color
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- text-decoration
- text-decoration-color
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-indent
- text-shadow
- text-underline-offset
- top
- transform
- transform-origin
- translate
- vertical-align
- visibility
- width
- word-spacing
- z-index
- zoom
