Primo Commit
This commit is contained in:
root
260
css/animation.css
Normal file
260
css/animation.css
Normal file
@@ -0,0 +1,260 @@
|
||||
/* ========================================
|
||||
TRANSIZIONI E ANIMAZIONI
|
||||
======================================== */
|
||||
|
||||
|
||||
/* Transizione per i link di navigazione */
|
||||
.navLink,
|
||||
.nav-link,
|
||||
.station-link,
|
||||
.linkBox {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Effetto hover sui link */
|
||||
.navLink:hover,
|
||||
.nav-link:hover,
|
||||
.station-link:hover,
|
||||
.linkBox:hover {
|
||||
transform: translateY(-2px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Effetto attivo sui link di navigazione del menu */
|
||||
|
||||
|
||||
@keyframes pulseActive {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: translateX(-50%) scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Effetto click/tap */
|
||||
.navLink:active,
|
||||
.nav-link:active,
|
||||
.station-link:active,
|
||||
.linkBox:active {
|
||||
transform: scale(0.98);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
/* Transizione per le card delle stazioni */
|
||||
.station-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.station-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Transizione per i clickBox della home */
|
||||
.clickBox {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.clickBox:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.clickBox:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Spinner di caricamento */
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.3s ease-in forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Transizione per elementi che appaiono */
|
||||
.content-page,
|
||||
.station-list,
|
||||
.player-container {
|
||||
animation: fadeInContent 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInContent {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Transizione per le immagini */
|
||||
.station-logo,
|
||||
.station-logo-large {
|
||||
transition: transform 0.3s ease, filter 0.3s ease;
|
||||
}
|
||||
|
||||
.station-logo:hover,
|
||||
.station-logo-large:hover {
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* Transizione per i pulsanti */
|
||||
button,
|
||||
.submit-btn,
|
||||
.play-pause-btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.submit-btn:hover,
|
||||
.play-pause-btn:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button:active,
|
||||
.submit-btn:active,
|
||||
.play-pause-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Transizione smooth per tutti gli elementi interattivi */
|
||||
a, button, input, textarea, select {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* RIMOSSO: underline animato per il menu */
|
||||
/* Non ci sono più after pseudo-elementi per le underline */
|
||||
|
||||
/* Transizione per il back-link */
|
||||
.back-link a {
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.back-link a:hover {
|
||||
transform: translateX(-5px);
|
||||
color: #4a90e2;
|
||||
}
|
||||
|
||||
/* Animazione per le liste */
|
||||
.stations-container {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.station-card {
|
||||
animation: fadeInScale 0.4s ease-out backwards;
|
||||
}
|
||||
|
||||
.station-card:nth-child(1) { animation-delay: 0.05s; }
|
||||
.station-card:nth-child(2) { animation-delay: 0.1s; }
|
||||
.station-card:nth-child(3) { animation-delay: 0.15s; }
|
||||
.station-card:nth-child(4) { animation-delay: 0.2s; }
|
||||
.station-card:nth-child(5) { animation-delay: 0.25s; }
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Transizione per i form */
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
border-color: #4a90e2;
|
||||
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
|
||||
}
|
||||
|
||||
/* Animazione per i messaggi di risposta */
|
||||
.form-response {
|
||||
animation: slideInDown 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Transizione per video e iframe */
|
||||
video,
|
||||
iframe {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
video:hover,
|
||||
iframe:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* Performance optimization */
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Riduzione movimento per chi ha impostato preferenze di accessibilità */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.navLink.active::before {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user