5 tipi di animazione con CSS3 sui bordi

5 tipi di animazione con CSS3 sui bordi

28 mar , 2014

Come già ho spiegato nel precedente articolo, le animazioni di CSS3 rendono semplici le operazioni che prima erano impossibili senza l’utilizzo di Javascript. In questo articolo vorrei dimostrarvi come, con qualche trucchetto, sia possibile creare unun menù con diversi tipi di animazione sui border attraverso le animazione di CSS3.

>> Scarica il progetto

>> Guarda la DEMO

Nella DEMO ci saranno 5 tipi diversi di animazione, vediamo quindi velocemente ognuna.

Apparizione esterna dei bordi

Questo effetto è ispirato a questo sito web e anima i link del menù in modo che i bordi appaiano all’esterno e vadano a racchiudere la voce. Nell’esempio ho semplicemente usato la proprietà transition di CSS3. Le linee dei bordi si sposteranno grazie al posizionamento tramite POSITION, TOP, RIGHT, BOTTOM e LEFT.

<nav class="menu">
      <ul id="animazione1">
           <li>
                <a href="index.html">Animazione 1
                     <span class="br-top"></span>
                     <span class="br-right"></span>
                     <span class="br-bottom"></span>
                     <span class="br-left"></span>
                </a>
           </li>
     </ul>
 </nav>

Come noterete nel codice non ho utilizzato 4 SPAN che nel CSS andranno a creare i border. Come noterete nel CSS ognuno di questi sarà posizionato in maniera diversa in modo da apparire dai 4 angoli del link.

#animazione1 li{ border: 2px solid #2D2D2D; }
#animazione1 li a .br-top,
#animazione1 li a .br-right,
#animazione1 li a .br-bottom,
#animazione1 li a .br-left{
background: white;
position: absolute;
transition: 0.3s;
}
 
#animazione1 li a .br-top{
height: 2px;
width: 0px;
top: -2px;
right: 110%;
}
#animazione1 li a .br-right{
height: 0px;
width: 2px;
top: -110%;
right: -2px;
}
#animazione1 li a .br-bottom{
height: 2px;
width: 0px;
bottom: -2px;
left: 110%;
}
#animazione1 li a .br-left{
height: 0px;
width: 2px;
bottom: -110%;
left: -2px;
}
 
/* ANIMAZIONE1 HOVER */
#animazione1 li a:hover .br-top{ width: 154px; right: -2px; }
#animazione1 li a:hover .br-right{ height: 54px; top: -2px; }
#animazione1 li a:hover .br-bottom{ width: 154px; left: -2px; }
#animazione1 li a:hover .br-left{ height: 54px; bottom: -2px; }

Apparizione esterna dei bordi in diagonale

La seconda animazione si basa principalmente sulla precedente, infatti, il codice HTML è lo stesso. Ho allontanato i 4 SPAN e ravvicinati quando il mouse passa sulla voce, in modo da creare una sorta di animazione diagonale del bordo, è più un illusione ottica.

#animazione2 li{ border: 2px solid #2D2D2D; }
 
#animazione2 li a .br-top,
#animazione2 li a .br-right,
#animazione2 li a .br-bottom,
#animazione2 li a .br-left{
background: white;
position: absolute;
transition: 0.3s;
}
 
#animazione2 li a .br-top{
height: 2px;
width: 0px;
top: -32px;
left: -2px;
}
#animazione2 li a .br-right{
height: 0px;
width: 2px;
top: -110%;
right: -32px;
}
#animazione2 li a .br-bottom{
height: 2px;
width: 0px;
bottom: -32px;
left: 110%;
}
#animazione2 li a .br-left{
height: 0px;
width: 2px;
bottom: -110%;
left: -32px;
}
 
/* ANIMAZIONE 2 HOVER */
#animazione2 li a:hover .br-top{ width: 154px; top:-2px; }
#animazione2 li a:hover .br-right{ height: 54px; top: -2px; right: -2px; }
#animazione2 li a:hover .br-bottom{ width: 154px; left: -2px; bottom: -2px; }
#animazione2 li a:hover .br-left{ height: 54px; bottom: -2px; left: -2px;}

Ho sempre utilizzato la proprietà TRANSITION di CSS3 per lavorare sull’animazione.

Effetto “Barra di caricamento”

Ho utilizzato le virgolette perchè questo effetto non ha nulla a che fare con una barra di caricamento, ma gli assomiglia. Al passaggio del mouse sul menù animeremo il bordo della voce in modo da spostarsi verso destra. Alla destra del bordo vi sarà un piccolo puntino luminoso. Stavolta ho utilizzato 2 SPAN, uno per il bordo e uno per il punto luminoso.

<nav class="menu">
<ul id="animazione3">
<li>
<a href="index.html">Animazione 1
<span class="hv-bottom"></span>
<span class="br-bottom"></span>
</a>
</li>
</ul>
</nav>

Per quanto riguada il CSS ho utilizzato in maniera più approfondita la proprietà TRANSITION di CSS3, creando 2 tipi di animazioni e stilizzando in maniera diversa gli effetti hover del bordo e del punto.

#animazione3 li{
border: 2px solid #2D2D2D; !important;
}
 
#animazione3 li a .hv-bottom{
height: 2px;
width: 2px;
background: #2ecc71;
position: absolute;
box-shadow: 0px 0px 5px 2px #2ecc71;
opacity: 0;
 
transition: all 1s ease-out, opacity 0.5s ease-out;
}
#animazione3 li a .br-bottom{
height: 2px;
width: 0px;
background: #2ecc71;
position: absolute;
opacity: 0;
 
transition: all 1s ease-out, opacity 0.5s ease-out;
 
bottom: -2px;
left: -2px;
}
 
#animazione3 li a .hv-bottom{
bottom: -2px;
left: -2px;
}
 
/* ANIMAZIONE 3 HOVER */
#animazione3 li a:hover .hv-bottom{ opacity: 1; left:100%; }
#animazione3 li a:hover .br-bottom{ opacity: 1; width: 154px; left: -2px; bottom: -2px; }

Notare nel dettaglio che la opacità del puntino è dimezzata rispetto a tutto il resto, in questo modo si noterà più velocemente rispetto al bordo, essa infatti ha un animazione più veloce.

Animazione circolare dei bordi di una voce

Questo 4° esperimento attiva al passaggio del mouse un animazione circolare sul nostro menù. Stavolta ciò che verrà animato saranno proprio i bordi della nostra voce e non più i 4 SPAN!

<nav class="menu">
<ul id="animazione4">
<li>
<a href="index.html">Animazione 1</a>
</li>
<li>
<a href="index2.html">Animazione 2</a>
</li>
<li>
<a href="index3.html">Animazione 3</a>
</li>
<li>
<a href="index4.html">Animazione 4</a>
</li>
<li>
<a href="index5.html">Animazione 5</a>
</li>
</ul>
</nav>

Nel codice HTML rimangono solo i 4 anchor tag che verranno animati al passaggio del mouse.

@keyframes bording {
0% { border-left: 10px solid #2ecc71; }
25% { border-left: 10px solid white; border-top: 10px solid #2ecc71; }
50% { border-top: 10px solid white; border-right: 10px solid #2ecc71; }
75% { border-right: 10px solid white; border-bottom: 10px solid #2ecc71; }
100% { border-bottom: 10px solid white; border-left: 10px solid #2ecc71; }
}
 
#animazione4 li{
width: 150px;
height: 150px;
line-height: 150px;
border: 10px solid white !important;
border-radius: 100px;
transition: all 0.5s ease-out;
}
/* ANIMAZIONE 4 HOVER */
#animazione4 li:hover{
animation: bording 3s infinite 0s;
animation-timing-function: linear;
}

Al contrario di tutti gli altri esempi qua siamo andati a creare una nostra animazione personalizzata tramite la funzione KEYFRAME di CSS3. La nostra animazione accenderà e spegnerà consecutivamente i border della voce. Verrà poi richiamata dalla proprietà ANIMATION definendo la sua durata di 3 secondi e la ripetizione infinita.

Sfondo che appare dai bordi laterali

Con l’ultima animazione andremo a riempire la voce, al passaggio del mouse, con uno sfondo colorato partendo dai vari lati. Per questo utilizzeremo di nuovo i vari SPAN, stavolta essi determineranno da dove partirà il riempimento dell sfondo.

<nav class="menu">
<ul id="animazione5">
<li class="an1">
<a href="index.html">Animazione 1
<span class="br-top"></span>
</a>
</li>
<li class="an2">
<a href="index2.html">Animazione 2
<span class="br-right"></span>
</a>
</li>
<li class="an3">
<a href="index3.html">Animazione 3
<span class="br-bottom"></span>
</a>
</li>
<li class="an4">
<a href="index4.html">Animazione 4
<span class="br-left"></span>
</a>
</li>
<li class="an5">
<a href="index5.html">Animazione 5
<span class="br-top"></span>
<span class="br-right"></span>
<span class="br-bottom"></span>
<span class="br-left"></span>
</a>
</li>
</ul>
</nav>

Utilizzeremo per lo scopo la proprietà TRANSITION di CSS3. Al passaggio del mouse cambieremo l’altezza o la larghezza di uno dei 4 SPAN, in questo modo riempirà lo sfondo.

#animazione5 li{ border: 2px solid #2D2D2D; }
 
#animazione5 li a .br-top,
#animazione5 li a .br-right,
#animazione5 li a .br-bottom,
#animazione5 li a .br-left{
position: absolute;
transition: 0.3s;
z-index: -1;
}
 
#animazione5 li a .br-top{
width: 150px;
height: 0px;
top: -2px;
left: -2px;
background: #0079c1;
}
#animazione5 li a .br-right{
width: 0px;
height: 52px;
top: -2px;
right: -2px;
background: #e67e22;
}
#animazione5 li a .br-bottom{
width: 150px;
height: 0px;
bottom: -2px;
right: -2px;
background: #04a466;
}
#animazione5 li a .br-left{
width: 0px;
height: 52px;
top: -2px;
left: -2px;
background: #95a5a6;
}
 
/* ANIMAZIONE 5 HOVER */
#animazione5 .an1:hover a .br-top{ height: 52px; }
#animazione5 .an2:hover a .br-right{ width: 152px; }
#animazione5 .an3:hover a .br-bottom{ height: 52px; }
#animazione5 .an4:hover a .br-left{ width: 152px; }
 
#animazione5 .an5:hover a .br-top{ height: 52px; }
#animazione5 .an5:hover a .br-right{ width: 152px; }
#animazione5 .an5:hover a .br-bottom{ height: 52px; }
#animazione5 .an5:hover a .br-left{ width: 152px; }

In questo esempio è importante utilizzare z-index per fare in modo lo sfondo non copra le scritte. Ogni SPAN avrà un colore di sfondo diverso.

Summary

Article Name

5 tipi di animazione sui bordi con CSS3

Author

Giacomo Zurru

CSS3, featured, HTML

Geckozone