**Basic Transition:**
```css
.transition-element {
width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease-in-out;
}
.transition-element:hover {
width: 150px;
}
```
In this example:
- `.transition-element` is the element you want to apply the transition to.
- `transition: width 0.5s ease-in-out;` specifies that the `width` property will transition over 0.5 seconds with an ease-in-out timing function.
- When the element is hovered over, its width smoothly transitions from 100px to 150px.
**Transition Multiple Properties:**
You can transition multiple properties at once:
```css
.transition-element {
width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.transition-element:hover {
width: 150px;
background-color: red;
}
```
**Delaying Transitions:**
You can also introduce a delay before a transition starts:
```css
.transition-element {
width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease-in-out 0.2s;
}
.transition-element:hover {
width: 150px;
}
```
In this case, the transition will start 0.2 seconds after the element is hovered over.
**Transition Timing Functions:**
Different timing functions control the speed of the transition:
- `ease`: Starts slowly, accelerates, and then slows down at the end.
- `linear`: Progresses at a constant speed.
- `ease-in`: Starts slowly and accelerates.
- `ease-out`: Starts quickly and decelerates.
- `ease-in-out`: Starts slowly, accelerates, and then decelerates.
**Transitions with All Properties:**
You can use the `all` keyword to transition all properties that change:
```css
.transition-element {
width: 100px;
height: 100px;
background-color: blue;
transition: all 0.5s ease-in-out;
}
.transition-element:hover {
width: 150px;
background-color: red;
}
```
Keep in mind that transitions are great for subtle animations, but if you're looking for more complex animations, keyframe animations or JavaScript-based animations might be more appropriate.
0 Comments