andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes in the @keyframes rule

Browse Source
This commit is contained in:
juani
2018-10-30 19:55:51 -03:00
parent 57f13902cd
commit 3abaa784a3
1 changed files with 2 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
snippets/bouncing-loader.md
View File

@ -16,13 +16,9 @@ Creates a bouncing loader animation.
```css ```css
@keyframes bouncing-loader { @keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to { to {
opacity: 0.1; opacity: 0.1;
transform: translateY(-1rem); transform: translate3d(0, -1rem, 0);
} }
} }
.bouncing-loader { .bouncing-loader {
@ -51,7 +47,7 @@ Creates a bouncing loader animation.
Note: `1rem` is usually `16px`. Note: `1rem` is usually `16px`.
1. `@keyframes` defines an animation that has two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translateY()`. 1. `@keyframes` defines an animation that has two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translate3d()`. Using a single axis translation on `transform: translate3d()` improves the performance of the animation.
2. `.bouncing-loader` is the parent container of the bouncing circles and uses `display: flex` 2. `.bouncing-loader` is the parent container of the bouncing circles and uses `display: flex`
and `justify-content: center` to position them in the center. and `justify-content: center` to position them in the center.