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

fix: only animate transform/opacity and remove prefixed keyframes

Browse Source
This commit is contained in:
Felipe da Silva
2018-03-01 08:35:54 -03:00
parent e8d8aed0ad
commit 7f96966dfb
1 changed files with 22 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
Animated-loading-animation.md
View File

@ -15,56 +15,38 @@ Clean & simple animated loading animation with CSS3. If you are worried about su
#### CSS
```css
.loader {
.snippet-demo__Animated-loading-animation {
text-align: center;
}
.loader span {
.snippet-demo__Animated-loading-animation span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
width: 24px;
height: 24px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
animation: loader 0.9s infinite alternate;
animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
.snippet-demo__Animated-loading-animation span:nth-of-type(2) {
animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
.snippet-demo__Animated-loading-animation span:nth-of-type(3) {
animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes loader {
@keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
```
#### Demo
@ -88,50 +70,32 @@ Clean & simple animated loading animation with CSS3. If you are worried about su
.snippet-demo__Animated-loading-animation span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
width: 24px;
height: 24px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
animation: loader 0.9s infinite alternate;
animation: loader 0.9s infinite alternate;
}
.snippet-demo__Animated-loading-animation span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
animation-delay: 0.3s;
}
.snippet-demo__Animated-loading-animation span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes loader {
@keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
</style>
#### Explanation