Add content to Using CSS Transitions stub (#28154)
Replacing the stub for Using CSS transition with actual content, describing the basic what and how of CSS transitionspull/34159/head
parent
39bba0e6cc
commit
f6bcd19600
|
@ -3,21 +3,47 @@ title: Using CSS Transitions
|
|||
---
|
||||
## Using CSS Transitions
|
||||
|
||||
CSS Transitions are used to create smooth movement of the elements in a website. They require less code than CSS animations, and tend to be less complex.
|
||||
**CSS transitions** provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
|
||||
|
||||
Transitions take an element from one CSS value to another. Here's an example:
|
||||
CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).
|
||||
|
||||
```css
|
||||
.transition-me {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
#### Which CSS properties can be transitioned?
|
||||
|
||||
[CSS animated properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)
|
||||
|
||||
#### Defining transitions
|
||||
|
||||
CSS Transitions are controlled using the shorthand `transition` property.
|
||||
You can control the individual components of the transition with the following sub-properties:
|
||||
|
||||
`transition-property`: Name of the property, which transition should be applied.
|
||||
|
||||
`transition-duration`: Duration over which transitions should occur.
|
||||
|
||||
`transition-timing-function`: Function to define how intermediate values for properties are computed.
|
||||
|
||||
`transition-delay`: Defines how long to wait between the time a property is changed and the transition actually begins.
|
||||
|
||||
```
|
||||
div {
|
||||
transition: <property> <duration> <timing-function> <delay>;
|
||||
}
|
||||
```
|
||||
|
||||
#### Example
|
||||
|
||||
This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:
|
||||
|
||||
```
|
||||
#delay {
|
||||
font-size: 14px;
|
||||
transition-property: font-size;
|
||||
transition-duration: 4s;
|
||||
transition-delay: 2s;
|
||||
}
|
||||
|
||||
.transition-me:hover {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
background: red;
|
||||
#delay:hover {
|
||||
font-size: 36px;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in New Issue