<style>
/* Animazione semplice: cambia colore e trasparenza */
@keyframes fadeColor {
0% { background-color: red; opacity: 1; }
50% { background-color: blue; opacity: 0.5; }
100% { background-color: red; opacity: 1; }
}
/* Primo elemento con durata di 2 secondi */
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
animation-name: fadeColor;
animation-duration: 2s; /* durata di 2 secondi */
animation-iteration-count: infinite; /* ciclo infinito */
}
/* Secondo elemento con durata di 500ms */
.box2 {
width: 100px;
height: 100px;
background-color: green;
margin: 20px;
animation-name: fadeColor;
animation-duration: 500ms; /* durata di 500 millisecondi */
animation-iteration-count: infinite; /* ciclo infinito */
/* Esempio di durata più breve */
}
/* Terzo elemento con più durate (per esempio, in caso di più animazioni) */
@keyframes moveRight {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
.box3 {
width: 100px;
height: 100px;
background-color: orange;
margin: 20px;
animation-name: moveRight;
animation-duration: 3s, 1.5s; /* prima animazione 3s, seconda 1.5s */
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<a href="#" onClick="window.history.go(-1);">Home</a>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>