58 lines
1.2 KiB
CSS
58 lines
1.2 KiB
CSS
/* Animazioni */
|
|
.titolo {
|
|
animation: fadeIn 2s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% { opacity: 0; will-change: opacity;}
|
|
100% { opacity: 1; will-change: opacity;}
|
|
}
|
|
|
|
#spade-animazione {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
transition: opacity 0.5s ease-in-out; /* Durata ridotta a 0.5 secondi */
|
|
}
|
|
|
|
#spade-animazione img {
|
|
width: auto;
|
|
max-width: 80%;
|
|
height: auto;
|
|
position: static;
|
|
transform: none;
|
|
transition: opacity 0.5s ease-in-out; /* Durata ridotta a 0.5 secondi */
|
|
}
|
|
|
|
/* Animazione di apertura */
|
|
#spade-animazione.apertura img {
|
|
animation: spada-apertura 0.5s ease-in-out forwards; /* Durata ridotta a 0.5 secondi */
|
|
}
|
|
|
|
@keyframes spada-apertura {
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Animazione di chiusura */
|
|
#spade-animazione.chiusura img {
|
|
animation: spada-chiusura 0.5s ease-in-out forwards; /* Durata ridotta a 0.5 secondi */
|
|
}
|
|
|
|
@keyframes spada-chiusura {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|