mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
101 lines
2.7 KiB
CSS
101 lines
2.7 KiB
CSS
.anim-scale-in {
|
|
animation-name: scale-in;
|
|
animation-duration: .15s;
|
|
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.anim-scale-out {
|
|
-webkit-animation: scale-out-center 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
|
|
animation: scale-out-center 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
|
|
}
|
|
@-webkit-keyframes scale-out-center {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes scale-out-center {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.anim-fade-in {
|
|
-webkit-animation: fade-in 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
|
animation: fade-in 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
|
}
|
|
@-webkit-keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.anim-fade-in-top {
|
|
-webkit-animation: fade-in-top 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
|
animation: fade-in-top 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
|
}
|
|
@-webkit-keyframes fade-in-top {
|
|
0% {
|
|
-webkit-transform: translateY(-50px);
|
|
transform: translateY(-50px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fade-in-top {
|
|
0% {
|
|
-webkit-transform: translateY(-50px);
|
|
transform: translateY(-50px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.anim-fade-out {
|
|
-webkit-animation: fade-out 0.15s ease-out both;
|
|
animation: fade-out 0.15s ease-out both;
|
|
}
|
|
@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}
|
|
.anim-fade-out-top{-webkit-animation:fade-out-top .15s cubic-bezier(.25,.46,.45,.94) both;animation:fade-out-top .15s cubic-bezier(.25,.46,.45,.94) both}
|
|
@-webkit-keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}@keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}
|