ronaldo/quiz-ius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved quiz to folder

Browse Source
This commit is contained in:
Ronaldo
2026-04-06 10:55:32 +00:00
parent 7b9fb34462
commit a315eab0d5
249 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

885
quiz/lib/ionic/css/transition-style.css Executable file
View File

@@ -0,0 +1,885 @@
:root {
--circle-center-center-out: circle(0%);
--circle-center-center-in: circle(125%);
--circle-hesitate: circle(40%);
--circle-top-left-out: circle(0% at top left);
--circle-top-right-out: circle(0% at top right);
--circle-bottom-right-out: circle(0% at bottom right);
--circle-bottom-left-out: circle(0% at bottom left);
--circle-top-left-in: circle(150% at top left);
--circle-top-right-in: circle(150% at top right);
--circle-bottom-right-in: circle(150% at bottom right);
--circle-bottom-left-in: circle(150% at bottom left);
--wipe-in: inset(0 0 0 0);
--wipe-bottom: inset(100% 0 0 0);
--wipe-left: inset(0 100% 0 0);
--wipe-top: inset(0 0 100% 0);
--wipe-right: inset(0 0 0 100%);
--wipe-top-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
--wipe-top-right-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
--wipe-bottom-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
--wipe-bottom-right-in: polygon(-50% 0%, 200% 0, 0 200%, 0 -50%);
--wipe-top-left-out: polygon(0 0, 0 0, 0 0, 0 50%);
--wipe-top-right-out: polygon(50% -50%, 150% 50%, 150% 50%, 50% -50%);
--wipe-bottom-left-out: polygon(-50% 50%, 50% 150%, 50% 150%, -50% 50%);
--wipe-bottom-right-out: polygon(150% 50%, 150% 50%, 50% 150%, 50% 150%);
--wipe-cinematic-out: inset(100% 0 100% 0);
--wipe-cinematic-mid: inset(10% 0 10% 0);
--square-hesitate: inset(33% 33% 33% 33%);
--square-out: inset(100% 100% 100% 100%);
--square-in: var(--wipe-in);
--square-top-left-out: inset(0 100% 100% 0);
--square-top-right-out: inset(0 0 100% 100%);
--square-bottom-left-out: inset(100% 100% 0 0);
--square-bottom-right-out: inset(100% 0 0 100%);
--diamond-center-in: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
--diamond-center-out: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
--diamond-hesitate: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%);
--opposing-corners-in: polygon(0 0, 0 100%, 100% 100%, 100% 0);
--opposing-corners-out: polygon(0 0, 50% 50%, 100% 100%, 50% 50%)
}
[transition-style] {
animation-delay: var(--transition__delay, 0);
animation-duration: var(--transition__duration, 2.5s);
animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
animation-fill-mode: both;
will-change: clip-path
}
@media (prefers-reduced-motion:reduce),
print {
[transition-style] {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
animation-iteration-count: 1 !important
}
}
@keyframes wipe-out-top {
0% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
to {
-webkit-clip-path: var(--wipe-top);
clip-path: var(--wipe-top)
}
}
[transition-style="out:wipe:top"],
[transition-style="out:wipe:up"] {
animation-name: wipe-out-top
}
@keyframes wipe-out-right {
0% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
to {
-webkit-clip-path: var(--wipe-right);
clip-path: var(--wipe-right)
}
}
[transition-style="out:wipe:right"] {
animation-name: wipe-out-right
}
@keyframes wipe-out-bottom {
0% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
to {
-webkit-clip-path: var(--wipe-bottom);
clip-path: var(--wipe-bottom)
}
}
[transition-style="out:wipe:bottom"],
[transition-style="out:wipe:down"] {
animation-name: wipe-out-bottom
}
@keyframes wipe-out-left {
0% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
to {
-webkit-clip-path: var(--wipe-left);
clip-path: var(--wipe-left)
}
}
[transition-style="out:wipe:left"] {
animation-name: wipe-out-left
}
@keyframes wipe-in-top {
0% {
-webkit-clip-path: var(--wipe-top);
clip-path: var(--wipe-top)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:down"],
[transition-style="in:wipe:top"] {
animation-name: wipe-in-top
}
@keyframes wipe-in-right {
0% {
-webkit-clip-path: var(--wipe-left);
clip-path: var(--wipe-left)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:right"] {
animation-name: wipe-in-right
}
@keyframes wipe-in-bottom {
0% {
-webkit-clip-path: var(--wipe-bottom);
clip-path: var(--wipe-bottom)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:bottom"],
[transition-style="in:wipe:up"] {
animation-name: wipe-in-bottom
}
@keyframes wipe-in-left {
0% {
-webkit-clip-path: var(--wipe-right);
clip-path: var(--wipe-right)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:left"] {
animation-name: wipe-in-left
}
@keyframes wipe-in-top-right {
0% {
-webkit-clip-path: var(--wipe-bottom-left-out);
clip-path: var(--wipe-bottom-left-out)
}
to {
-webkit-clip-path: var(--wipe-top-right-in);
clip-path: var(--wipe-top-right-in)
}
}
[transition-style="in:wipe:top-right"] {
animation-name: wipe-in-top-right
}
@keyframes wipe-in-top-left {
0% {
-webkit-clip-path: var(--wipe-bottom-right-out);
clip-path: var(--wipe-bottom-right-out)
}
to {
-webkit-clip-path: var(--wipe-top-left-in);
clip-path: var(--wipe-top-left-in)
}
}
[transition-style="in:wipe:top-left"] {
animation-name: wipe-in-top-left
}
@keyframes wipe-in-bottom-right {
0% {
-webkit-clip-path: var(--wipe-top-left-out);
clip-path: var(--wipe-top-left-out)
}
to {
-webkit-clip-path: var(--wipe-bottom-right-in);
clip-path: var(--wipe-bottom-right-in)
}
}
[transition-style="in:wipe:bottom-right"] {
animation-name: wipe-in-bottom-right
}
@keyframes wipe-in-bottom-left {
0% {
-webkit-clip-path: var(--wipe-top-right-out);
clip-path: var(--wipe-top-right-out)
}
to {
-webkit-clip-path: var(--wipe-bottom-left-in);
clip-path: var(--wipe-bottom-left-in)
}
}
[transition-style="in:wipe:bottom-left"] {
animation-name: wipe-in-bottom-left
}
@keyframes wipe-out-top-right {
0% {
-webkit-clip-path: var(--wipe-bottom-left-in);
clip-path: var(--wipe-bottom-left-in)
}
to {
-webkit-clip-path: var(--wipe-top-right-out);
clip-path: var(--wipe-top-right-out)
}
}
[transition-style="out:wipe:top-right"] {
animation-name: wipe-out-top-right
}
@keyframes wipe-out-top-left {
0% {
-webkit-clip-path: var(--wipe-bottom-right-in);
clip-path: var(--wipe-bottom-right-in)
}
to {
-webkit-clip-path: var(--wipe-top-left-out);
clip-path: var(--wipe-top-left-out)
}
}
[transition-style="out:wipe:top-left"] {
animation-name: wipe-out-top-left
}
@keyframes wipe-out-bottom-right {
0% {
-webkit-clip-path: var(--wipe-top-left-in);
clip-path: var(--wipe-top-left-in)
}
to {
-webkit-clip-path: var(--wipe-bottom-right-out);
clip-path: var(--wipe-bottom-right-out)
}
}
[transition-style="out:wipe:bottom-right"] {
animation-name: wipe-out-bottom-right
}
@keyframes wipe-out-bottom-left {
0% {
-webkit-clip-path: var(--wipe-top-right-in);
clip-path: var(--wipe-top-right-in)
}
to {
-webkit-clip-path: var(--wipe-bottom-left-out);
clip-path: var(--wipe-bottom-left-out)
}
}
[transition-style="out:wipe:bottom-left"] {
animation-name: wipe-out-bottom-left
}
@keyframes wipe-cinematic-out {
0% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
30%,
70% {
-webkit-clip-path: var(--wipe-cinematic-mid);
clip-path: var(--wipe-cinematic-mid)
}
to {
-webkit-clip-path: var(--wipe-cinematic-out);
clip-path: var(--wipe-cinematic-out)
}
}
[transition-style="out:wipe:cinematic"] {
animation-name: wipe-cinematic-out
}
@keyframes wipe-cinematic-in {
0% {
-webkit-clip-path: var(--wipe-cinematic-out);
clip-path: var(--wipe-cinematic-out)
}
30%,
70% {
-webkit-clip-path: var(--wipe-cinematic-mid);
clip-path: var(--wipe-cinematic-mid)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:cinematic"] {
animation-name: wipe-cinematic-in
}
@keyframes circle-in-hesitate {
0% {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
40% {
-webkit-clip-path: var(--circle-hesitate);
clip-path: var(--circle-hesitate)
}
to {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
}
[transition-style="in:circle:hesitate"] {
animation-name: circle-in-hesitate
}
@keyframes circle-out-hesitate {
0% {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
40% {
-webkit-clip-path: var(--circle-hesitate);
clip-path: var(--circle-hesitate)
}
to {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
}
[transition-style="out:circle:hesitate"] {
animation-name: circle-out-hesitate
}
@keyframes circle-in-center {
0% {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
to {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
}
[transition-style="in:circle:center"] {
animation-name: circle-in-center
}
@keyframes circle-out-center {
0% {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
to {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
}
[transition-style="out:circle:center"] {
animation-name: circle-out-center
}
@keyframes circle-out-top-left {
0% {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
to {
-webkit-clip-path: var(--circle-top-left-out);
clip-path: var(--circle-top-left-out)
}
}
[transition-style="out:circle:top-left"] {
--transition__duration: 1.5s;
animation-name: circle-out-top-left
}
@keyframes circle-out-top-right {
0% {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
to {
-webkit-clip-path: var(--circle-top-right-out);
clip-path: var(--circle-top-right-out)
}
}
[transition-style="out:circle:top-right"] {
--transition__duration: 1.5s;
animation-name: circle-out-top-right
}
@keyframes circle-out-bottom-left {
0% {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
to {
-webkit-clip-path: var(--circle-bottom-left-out);
clip-path: var(--circle-bottom-left-out)
}
}
[transition-style="out:circle:bottom-left"] {
--transition__duration: 1.5s;
animation-name: circle-out-bottom-left
}
@keyframes circle-out-bottom-right {
0% {
-webkit-clip-path: var(--circle-center-center-in);
clip-path: var(--circle-center-center-in)
}
to {
-webkit-clip-path: var(--circle-bottom-right-out);
clip-path: var(--circle-bottom-right-out)
}
}
[transition-style="out:circle:bottom-right"] {
--transition__duration: 1.5s;
animation-name: circle-out-bottom-right
}
@keyframes circle-in-top-left {
0% {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
to {
-webkit-clip-path: var(--circle-top-left-in);
clip-path: var(--circle-top-left-in)
}
}
[transition-style="in:circle:top-left"] {
animation-name: circle-in-top-left
}
@keyframes circle-in-top-right {
0% {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
to {
-webkit-clip-path: var(--circle-top-right-in);
clip-path: var(--circle-top-right-in)
}
}
[transition-style="in:circle:top-right"] {
animation-name: circle-in-top-right
}
@keyframes circle-in-bottom-left {
0% {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
to {
-webkit-clip-path: var(--circle-bottom-left-in);
clip-path: var(--circle-bottom-left-in)
}
}
[transition-style="in:circle:bottom-left"] {
animation-name: circle-in-bottom-left
}
@keyframes circle-in-bottom-right {
0% {
-webkit-clip-path: var(--circle-center-center-out);
clip-path: var(--circle-center-center-out)
}
to {
-webkit-clip-path: var(--circle-bottom-right-in);
clip-path: var(--circle-bottom-right-in)
}
}
[transition-style="in:circle:bottom-right"] {
animation-name: circle-in-bottom-right
}
@keyframes square-in-hesitate {
0% {
-webkit-clip-path: var(--square-out);
clip-path: var(--square-out)
}
40% {
-webkit-clip-path: var(--square-hesitate);
clip-path: var(--square-hesitate)
}
to {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
}
[transition-style="in:square:hesitate"] {
animation-name: square-in-hesitate
}
@keyframes square-out-hesitate {
0% {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
40% {
-webkit-clip-path: var(--square-hesitate);
clip-path: var(--square-hesitate)
}
to {
-webkit-clip-path: var(--square-out);
clip-path: var(--square-out)
}
}
[transition-style="out:square:hesitate"] {
animation-name: square-out-hesitate
}
@keyframes square-in-center {
0% {
-webkit-clip-path: var(--square-out);
clip-path: var(--square-out)
}
to {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
}
[transition-style="in:square:center"] {
animation-name: square-in-center
}
@keyframes square-out-center {
0% {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
to {
-webkit-clip-path: var(--square-out);
clip-path: var(--square-out)
}
}
[transition-style="out:square:center"] {
animation-name: square-out-center
}
@keyframes square-out-top-left {
0% {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
to {
-webkit-clip-path: var(--square-top-left-out);
clip-path: var(--square-top-left-out)
}
}
[transition-style="out:square:top-left"] {
--transition__duration: 1.5s;
animation-name: square-out-top-left
}
@keyframes square-out-top-right {
0% {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
to {
-webkit-clip-path: var(--square-top-right-out);
clip-path: var(--square-top-right-out)
}
}
[transition-style="out:square:top-right"] {
--transition__duration: 1.5s;
animation-name: square-out-top-right
}
@keyframes square-out-bottom-left {
0% {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
to {
-webkit-clip-path: var(--square-bottom-left-out);
clip-path: var(--square-bottom-left-out)
}
}
[transition-style="out:square:bottom-left"] {
--transition__duration: 1.5s;
animation-name: square-out-bottom-left
}
@keyframes square-out-bottom-right {
0% {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
to {
-webkit-clip-path: var(--square-bottom-right-out);
clip-path: var(--square-bottom-right-out)
}
}
[transition-style="out:square:bottom-right"] {
--transition__duration: 1.5s;
animation-name: square-out-bottom-right
}
@keyframes square-in-top-left {
0% {
-webkit-clip-path: var(--square-bottom-right-out);
clip-path: var(--square-bottom-right-out)
}
to {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
}
[transition-style="in:square:top-left"] {
animation-name: square-in-top-left
}
@keyframes square-in-top-right {
0% {
-webkit-clip-path: var(--square-bottom-left-out);
clip-path: var(--square-bottom-left-out)
}
to {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
}
[transition-style="in:square:top-right"] {
animation-name: square-in-top-right
}
@keyframes square-in-bottom-left {
0% {
-webkit-clip-path: var(--square-top-right-out);
clip-path: var(--square-top-right-out)
}
to {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
}
[transition-style="in:square:bottom-left"] {
animation-name: square-in-bottom-left
}
@keyframes square-in-bottom-right {
0% {
-webkit-clip-path: var(--square-top-left-out);
clip-path: var(--square-top-left-out)
}
to {
-webkit-clip-path: var(--square-in);
clip-path: var(--square-in)
}
}
[transition-style="in:square:bottom-right"] {
animation-name: square-in-bottom-right
}
@keyframes polygon-in-opposing-corners {
0% {
-webkit-clip-path: var(--opposing-corners-out);
clip-path: var(--opposing-corners-out)
}
to {
-webkit-clip-path: var(--opposing-corners-in);
clip-path: var(--opposing-corners-in)
}
}
[transition-style="in:polygon:opposing-corners"] {
--transition__duration: 1.5s;
animation-name: polygon-in-opposing-corners
}
@keyframes polygon-out-opposing-corners {
0% {
-webkit-clip-path: var(--opposing-corners-in);
clip-path: var(--opposing-corners-in)
}
to {
-webkit-clip-path: var(--opposing-corners-out);
clip-path: var(--opposing-corners-out)
}
}
[transition-style="out:polygon:opposing-corners"] {
--transition__duration: 1.5s;
animation-name: polygon-out-opposing-corners
}
@keyframes diamond-in-center {
0% {
-webkit-clip-path: var(--diamond-center-out);
clip-path: var(--diamond-center-out)
}
to {
-webkit-clip-path: var(--diamond-center-in);
clip-path: var(--diamond-center-in)
}
}
[transition-style="in:diamond:center"] {
--transition__duration: 1.5s;
animation-name: diamond-in-center
}
@keyframes diamond-out-center {
0% {
-webkit-clip-path: var(--diamond-center-in);
clip-path: var(--diamond-center-in)
}
to {
-webkit-clip-path: var(--diamond-center-out);
clip-path: var(--diamond-center-out)
}
}
[transition-style="out:diamond:center"] {
--transition__duration: 1.5s;
animation-name: diamond-out-center
}
@keyframes diamond-in-double-scale {
0% {
-webkit-clip-path: var(--diamond-center-out);
clip-path: var(--diamond-center-out)
}
40% {
-webkit-clip-path: var(--diamond-hesitate);
clip-path: var(--diamond-hesitate)
}
to {
-webkit-clip-path: var(--diamond-center-in);
clip-path: var(--diamond-center-in)
}
}
[transition-style="in:diamond:hesitate"] {
--transition__duration: 1.5s;
animation-name: diamond-in-double-scale
}
@keyframes diamond-out-double-scale {
0% {
-webkit-clip-path: var(--diamond-center-in);
clip-path: var(--diamond-center-in)
}
40% {
-webkit-clip-path: var(--diamond-hesitate);
clip-path: var(--diamond-hesitate)
}
to {
-webkit-clip-path: var(--diamond-center-out);
clip-path: var(--diamond-center-out)
}
}
[transition-style="out:diamond:hesitate"] {
--transition__duration: 1.5s;
animation-name: diamond-out-double-scale
}