mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-18 22:01:42 +08:00
59 lines
1.2 KiB
CSS
59 lines
1.2 KiB
CSS
@keyframes intro {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-100, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes outro {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(-100, 0);
|
|
}
|
|
}
|
|
|
|
.intro {
|
|
animation-name: intro;
|
|
animation-duration: 3.0;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
}
|
|
.outro {
|
|
animation-name: outro;
|
|
animation-duration: 3.0;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
}
|
|
|
|
.gone {
|
|
opacity: 0;
|
|
transform: translate(-100, 0);
|
|
}
|
|
|
|
@keyframes play {
|
|
0% { transform: translate(0, 0); }
|
|
33% { transform: translate(100, 0); }
|
|
66% { transform: translate(100, 100); }
|
|
100% { transform: translate(0, 100); }
|
|
}
|
|
|
|
.idle {
|
|
transform: translate(0, 0);
|
|
}
|
|
.play {
|
|
animation-name: play;
|
|
animation-duration: 3.0;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
}
|