aiuto: far partire una transizione "al contrario"

[VincenzoB92]

Salve ragazzi scrivo qui perchè non ho ancora trovato nulla che mi aiuti con questo mio piccolo problema..
Sto realizzando un sito dove, in una particolare pagina, ho vari paragrafi "cliccabili"..volendo creare un effetto carino ci ho posizionato appena sorpa dei div con altezza e larghezza a 0, il bordo (solo quello superiore e quello destro) rosso e opacity a 0: sono invisibili quindi.
Al passaggio del mouse sui vari <p> però questi div vengono attivati, e grazie a una transizione riaquistano opacità, poi larghezza e altezza creando un particolare effetto di "evidenziatura" intorno al <p> .
In pratica ogni volta che passo con il mouse sopra a qualcuno di questi paragrafi, parte da sinistra verso destra una linea rossa che arriva fino in fondo al <p> e una volta arrivata all'estremità del paragrafo scende fino al suo margine inferiore.

Il problema che ho è che quando il mouse "esce" dall'area del paragrafo la transizione riparte nello stesso ordine di prima, ovvero togliendo l'opacità, poi la larghezza e quindi l'altezza..

Ecco io avrei bisogno di farla ripartire al contrario, mi spiego:
All'evento "hover" va bene così, prima il div riaquista opacità, poi larghezza e poi altezza creando l'effetto di questa linea rossa che traccia il contorno del <p>.
Non appena il mouse esce dal <p> vorrei che la transizione procedesse "al contrario", quindi prima toglie l'altezza poi la larghezza e infine l'opacità..
Spero di essermi spiegato e di trovare qualcuno disposto ad aiutarmi soprattutto! grazie (:

[VincenzoB92]

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 è:

@-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

[deleted_20210415]

Perché non provi con un po' di jQuery?

praticamente crei due classi con le animazioni, e tramite il metodo .addClass e .removeClass le gestisci ai diversi eventi del browser.
Per esempio, al window loading attribuisci una classe, all'hover di esempio un'altra e così via.

[VincenzoB92]

Ciao ShyMurder e grazie per la risposta,
comunque perchè volevo capire come farlo usando solo CSS, per ora ho risolto così:
al posto di opacity nelle animazioni gestisco il colore del bordo (al posto di "opacity: 0;" metto "border-color: white;" e al posto di "opacity: 1;"metto "border-color: red;") e l'effetto non cambia, solo che all'inizio la classe .esempio ha opacity: 0 e quindi è invisibile, di conseguenza l'animazione viene attivata ma non si vede nulla, poi con JS ho creato una semplice funzione che riportà l'opacity a 1 ogni volta che faccio hover..

Il problema è risolto, tutta via per una questione più di apprendimento che per altro volevo capire come farlo senza ausilio di scripts vari

Un'altra cosa:
usando le animazioni devo implementare diversi tipi di keyframe

@keyframe animazione {}
@-webkit-keyframe animazione {}
@-o-keyframe animazione {}
..e così via..

tuttavia mi "sporcano" la validazione del css, mi da un errore per ogni keyframe dopo il primo:

Spiacente, at-rule @-webkit-keyframes non è implementata
Spiacente, at-rule @-o-keyframes non è implementata
..e così via..

Il problema è che se tolgo questi keyframes poi l'animazione non funziona sulla maggiorparte dei browsers

Che significa "non è implementata"? E come risolvo?

[VincenzoB92]

ps questo è un esempio che ho trovato sul w3c --> http://www.w3schools.com/cssref/css3...-keyframes.asp

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

validandolo anche qui da errore "Spiacente, at-rule @-webkit-keyframes non è implementata" ... e se il CSS del w3c è errato misa proprio che con le animazioni bisogna mettere da parte la validazione