UP: animazioni (altro problema)
Provando a risolvere ho cambiato strategia, usando delle animazioni.
Ho creato 2 animazioni: la prima che esegue lo stesso lavoro della transizione, la seconda che lo fa al contrario.
Il tutto funziona a dovere tranne un'eccezione..
Dunque supponendo che l'oggetto a cui applico questo effetto abbia classe "esempio", il codice che riguarda questo effetto è:
codice:
@-webkit-keyframes apri {
    0%{
        opacity: 0;
        width: 0px;
        height: 0px;
    }
    70%{
        width: 800px;
        height: 0px;
    }
    
    100%{
        width: 800px;
        height: 120px;
        opacity: 1;
        
    }
}


@-webkit-keyframes chiudi {
    0%{
        opacity: 1;
        width: 800px;
        height: 120px;
    }
    30%{
        width: 800px;
        height: 0px;
    }
    
    100%{
        width: 0px;
        height: 0px;
        opacity: 0;
    }
}
.esempio {
    position: absolute;
    border-top-style: solid;
    border-top-width: 3px;
    border-right-style: solid;
    border-right-width: 3px;
    border-color: #FF0000;
    opacity: 0;
    height:1px;
    width: 1px;
    -webkit-animation-name: chiudi;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
}
.esempio:hover {
    -webkit-animation-name: apri;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
}
Il problema di cui parlo avviene al caricamento della pagina, infatti non appena carico la pagina tutti gli <p> si "attivano" contemporaneamente con l'animazione "chiudi". Esiste un modo per far partire l'animazione solo dopo che ho fatto hover?
help