Animations and Transitions
## Learning Objectives
- Create CSS transitions
- Build keyframe animations
- Control animation timing and easing
- Animate common properties
## Transitions
### Basic Transition
```css
.button {
background-color: #007bff;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
```
### Multiple Properties
```css
.box {
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
```
### Transition Shorthand
```css
.box {
transition: all 0.3s ease;
transition: transform 0.3s ease-in-out;
transition: opacity 0.2s linear, transform 0.3s ease-out;
}
```
## Transition Properties
### transition-property
```css
.box {
transition-property: transform, opacity, background-color;
}
```
### transition-duration
```css
.box {
transition-duration: 0.3s;
transition-duration: 300ms;
transition-duration: 0.5s, 0.3s;
}
```
### transition-timing-function
```css
.box {
transition-timing-function: ease; /* Slow start/end (default) */
transition-timing-function: linear; /* Constant speed */
transition-timing-function: ease-in; /* Slow start */
transition-timing-function: ease-out; /* Slow end */
transition-timing-function: ease-in-out; /* Slow start and end */
transition-timing-function: steps(4); /* Stepped animation */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Custom */
}
```
### transition-delay
```css
.box {
transition-delay: 0s; /* No delay (default) */
transition-delay: 0.5s; /* 0.5 second delay */
}
```
## Keyframe Animations
### Basic Animation
```css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 1s ease forwards;
}
```
### Multiple Steps
```css
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
opacity: 1;
}
}
```
### Percentage Syntax
```css
@keyframes complexAnimation {
0% {
transform: translate(0, 0);
background-color: red;
}
25% {
transform: translate(100px, 0);
background-color: blue;
}
50% {
transform: translate(100px, 100px);
background-color: green;
}
75% {
transform: translate(0, 100px);
background-color: yellow;
}
100% {
transform: translate(0, 0);
background-color: red;
}
}
```
## Animation Properties
### animation-name
```css
.box {
animation-name: slideIn;
}
```
### animation-duration
```css
.box {
animation-duration: 1s;
}
```
### animation-timing-function
```css
.box {
animation-timing-function: ease-in-out;
}
```
### animation-delay
```css
.box {
animation-delay: 0.5s;
}
```
### animation-iteration-count
```css
.box {
animation-iteration-count: 1; /* Run once */
animation-iteration-count: 3; /* Run 3 times */
animation-iteration-count: infinite; /* Run forever */
}
```
### animation-direction
```css
.box {
animation-direction: normal; /* Forward (default) */
animation-direction: reverse; /* Backward */
animation-direction: alternate; /* Forward then backward */
animation-direction: alternate-reverse; /* Backward then forward */
}
```
### animation-fill-mode
```css
.box {
animation-fill-mode: none; /* No fill (default) */
animation-fill-mode: forwards; /* Keep final state */
animation-fill-mode: backwards; /* Apply first frame before start */
animation-fill-mode: both; /* Both forwards and backwards */
}
```
### animation-play-state
```css
.box {
animation-play-state: running; /* Playing (default) */
animation-play-state: paused; /* Paused */
}
.box:hover {
animation-play-state: paused;
}
```
### Animation Shorthand
```css
.box {
animation: slideIn 1s ease-in-out 0.5s 3 alternate forwards;
/* name duration timing-function delay iteration-count direction fill-mode */
}
```
## Common Animations
### Fade In
```css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
```
### Slide Up
```css
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
```
### Scale Up
```css
@keyframes scaleUp {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
```
### Rotate
```css
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
### Pulse
```css
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
```
### Shake
```css
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
```
### Bounce
```css
@keyframes bounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(-20px);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
```
## Performance Optimization
### Use transform and opacity
```css
/* Good - hardware accelerated */
.box {
transform: translateX(100px);
opacity: 0.5;
}
/* Avoid - triggers layout */
.box {
margin-left: 100px;
width: 50%;
}
```
### Will Change
```css
.animated {
will-change: transform, opacity;
}
```
### GPU Acceleration
```css
.box {
transform: translateZ(0); /* Force GPU layer */
backface-visibility: hidden;
}
```
## Accessibility
### Respect prefers-reduced-motion
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
## Summary
- Transitions: `transition: property duration timing-function delay;`
- Keyframes: `@keyframes name { from {} to {} }` or percentage syntax
- Animation properties: name, duration, timing, delay, iteration-count, direction, fill-mode
- Use `transform` and `opacity` for better performance
- Use `prefers-reduced-motion` for accessibility
- Hardware acceleration: `transform: translateZ(0)`
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →