ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update CSS.md Animation section (#625) 

Updated the order in which properties appear in the Properties table to match the order in which they should be listed in the Shorthand form. Also added 2 missing properties ( animation-fill-mode & animation-play-state ) and an example for them. See link for more info: https://www.w3schools.com/cssref/css3_pr_animation.asp.
This commit is contained in:
Audrey Chavarria 2018-11-07 12:26:57 -08:00 committed by chad d
parent 12feb8202a
commit 77d78b29f6
1 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
css.md
View File

@ -170,23 +170,25 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
### Properties
| Property | Value |
| ---------------------------- | -------------------------------------------------- |
| `animation:` | _(shorthand)_ |
| `animation-name:` | `<name>` |
| `animation-delay:` | `<time>ms` |
| `animation-duration:` | `<time>ms` |
| `animation-direction:` | `normal` `reverse` `alternate` `alternate-reverse` |
| `animation-iteration-count:` | `infinite` `<number>` |
| `animation-timing-function:` | `ease` `linear` `ease-in` `ease-out` `ease-in-out` |
| Property | Value |
| ---------------------------- | -------------------------------------------------------- |
| `animation:` | _(shorthand)_ |
| `animation-name:` | `<name>` |
| `animation-duration:` | `<time>ms` |
| `animation-timing-function:` | `ease` `linear` `ease-in` `ease-out` `ease-in-out` |
| `animation-delay:` | `<time>ms` |
| `animation-iteration-count:` | `infinite` `<number>` |
| `animation-direction:` | `normal` `reverse` `alternate` `alternate-reverse` |
| `animation-fill-mode:` | `none` `forwards` `backwards` `both` `initial` `inherit` |
| `animation-play-state:` | `normal` `reverse` `alternate` `alternate-reverse` |
{: .-key-values}
### Shorthand
| | name | duration | timing-function | delay | count | direction |
| ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- |
| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` |
| | name | duration | timing-function | delay | count | direction |
| | name | duration | timing-function | delay | count | direction | fill-mode | play-state |
| ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- | --------- | ---------- |
| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` | `both` | `reverse` |
| | name | duration | timing-function | delay | count | direction | fill-mode | play-state |
{: .-css-breakdown}
### Example
@ -195,6 +197,7 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;
```
### Event