oreolek/salet
1
0
Fork 0
mirror of https://gitlab.com/Oreolek/salet.git synced 2024-06-27 20:35:08 +03:00
Code Issues Releases Wiki Activity

FadeIn/fadeOut animations

Browse source
This commit is contained in:
Alexander Yakovlev 2016-09-26 16:00:13 +07:00
parent b3f71f4c7b
commit cddd10c7ca
1 changed files with 47 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
sass/main.scss
View file

@ -209,41 +209,57 @@ hr {
@include prefix(animation-duration, 1s, webkit);
@include prefix(animation-fill-mode, both, webkit);
}
@mixin fadeOutUp() {
@mixin fadeOut() {
0% {
opacity: 1
}
100% {
opacity: 0;
@include prefix(transform, translate3d(0, -100%, 0), webkit ms);
}
}
@-webkit-keyframes fadeOutUp {
@include fadeOutUp()
}
@keyframes fadeOutUp {
@include fadeOutUp()
}
.fadeOutUp {
@include prefix(animation-name, fadeOutUp, webkit);
}
@mixin fadeInDown() {
0% {
opacity: 0;
@include prefix(transform, translate3d(0, -100%, 0), webkit ms);
@include prefix(transform, translate3d(0, -100%, 0), webkit ms);
}
100% {
display: block;
opacity: 1;
@include prefix(transform, none, webkit ms);
transform: scale(1);
}
100% {
padding: 0;
margin: 0;
height: 0;
border: 0;
transform: scale(0);
display: none;
opacity: 0;
}
}
@-webkit-keyframes fadeInDown {
@include fadeInDown()
@-webkit-keyframes fadeOut {
@include fadeOut()
}
@keyframes fadeInDown {
@include fadeInDown()
@keyframes fadeOut {
@include fadeOut()
}
.fadeInDown {
@include prefix(animation-name, fadeInDown, webkit);
.fadeOut {
@include prefix(animation-name, fadeOut, webkit);
}
@mixin fadeIn() {
0% {
padding: 0;
margin: 0;
height: 0;
border: 0;
transform: scale(0);
display: block;
opacity: 0;
}
100% {
padding: auto;
margin: auto;
height: auto;
border: auto;
transform: scale(1);
display: none;
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
@include fadeIn()
}
@keyframes fadeIn {
@include fadeIn()
}
.fadeIn {
@include prefix(animation-name, fadeIn, webkit);
}