Border animation css Opcje

[Maze123987]

Próbuję stworzyć w css dwa border animations, ktore po najechaniu myszka "hover" podkresla tekst. Jeden border ma wysuwac sie od prawej do lewej drugi na odwrot. Jeden jest nad, drugi pod tekstem, niestety póki co oba bordery są nad tekstem, rzeczywiscie jeden leci od prawej do lewej drugi od lewej do prawej, ale spotykaja sie gdzies po srodku i łączą. Jak przerzucic jeden border pod tekst? Kombinowalem z pozycją i nie bardzo mi idzie.


kod css

[HTML] pobierz, plaintext 
.klasa h3::before,
.klasa h3::after {
  display: run-in;
position:absolute;
  -webkit-transition:  -webkit-transform 1s, width 1s ease;
  -moz-transition:  -moz-transform 1s,  width 1s ease;
  transition:  transform 1s,  width 1s ease;
}
 
.klasa h3::before {
 
  content: '';
  color:#428BCA;
 
width:0;
border-top: 1px solid blue;
    font-size: 50px;
 
    font-weight: 400;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}
.klasa h3:hover::before {
  margin-left: 3px;
  content: '';
  color:#428BCA;
  line-height: 16px;
width:25%;
border-top: 1px solid blue;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
 
}
.klasa h3::after {
 
  content: '';
  color:#428BCA;
 
width:0;
border-bottom: 1px solid blue;
    font-size: 50px;
 
    font-weight: 400;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}
.klasa h3:hover::after {
  margin-left: 3px;
  content: '';
  color:#428BCA;
  line-height: 16px;
width:25%;
border-bottom: 1px solid blue;
 
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}
.klasa h3:hover::before{
 
  -moz-transform: translateX(0px);
  transform: translateX(0px);
  -moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
 
.klasa h3:hover::after {
 
  -webkit-transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  transform: translateX(-300px);
  -moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
 
div.klasa h3:hover {
  outline: none;
}
[HTML] pobierz, plaintext 

html:

[HTML] pobierz, plaintext 
<div class="klasa"><h3 class="logo">Tekst</div></h3></div>
[HTML] pobierz, plaintext 

@bump

Moze ktos wie jak po prostu zrobic animacje border top I bottom jedna od lewej do prawej, druga od prawej do lewej


Ten post edytował Maze123987 10.06.2014, 21:21:51

[MountainDew]

Nie wiem czy dobrze zrozumiałem potrzebę: http://codepen.io/anon/pen/wHDBo