CSS Translate вызывает опечатку

Question

Я пытаюсь добавить эффект в меню, которое я использую на веб-сайте. Эффект является первым в списке с добавлением цвета: http://tympanus.net/Development/CreativeLinkEffects/

Но когда я пытаюсь применить его к моему делу, у меня есть странная проблема, которая возникает при не зависании элемента. Вы можете видеть, что элементы, которые не зависают, изменяют непрозрачность и размер шрифта во время наведения на элемент.

Я добавил демо здесь:

a{ 
 
    text-decoration:none; 
 
} 
 

 
/* Effect 15: scale down, reveal */ 
 
.cl-effect-15 a { 
 
    color: #FFF; 
 
    text-shadow: none; 
 
} 
 
.cl-effect-15 a::before { 
 
    margin-right: 10px; 
 
    content:'['; 
 
    -webkit-transform: translateX(20px); 
 
    -moz-transform: translateX(20px); 
 
    transform: translateX(20px); 
 
} 
 
.cl-effect-15 a::after, .cl-effect-15 a::before { 
 
    display: inline-block; 
 
    opacity: 0; 
 
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; 
 
    -moz-transition: -moz-transform 0.3s, opacity 0.2s; 
 
    transition: transform 0.3s, opacity 0.2s; 
 
    font-size: 12px; 
 
} 
 
.cl-effect-15 a::after { 
 
    margin-left: 10px; 
 
    content:']'; 
 
    -webkit-transform: translateX(-20px); 
 
    -moz-transform: translateX(-20px); 
 
    transform: translateX(-20px); 
 
} 
 
.cl-effect-15 a:hover::before, .cl-effect-15 a:hover::after, .cl-effect-15 a:focus::before, .cl-effect-15 a:focus::after { 
 
    opacity: 1; 
 
    -webkit-transform: translateX(1px); 
 
    -moz-transform: translateX(0px); 
 
    transform: translateX(1px); 
 
    font-size: 14px; 
 
} 
 
.totblockhtml.html_2 { 
 
    padding-bottom:10px; 
 
    margin-bottom:0px; 
 
} 
 
.totblockhtml.html_2 { 
 
    margin-bottom: 0px; 
 
    padding-bottom: 9px; 
 
    padding-top: 4px; 
 
    width: 100%; 
 
    float: left; 
 
    background: none repeat scroll 0 0 #282F47; 
 
    margin-top: -20px; 
 
    background-image: url(../img/BlueJean.svg); 
 
} 
 
.totblockhtml.html_2 .block_content { 
 
    text-align:center; 
 
    color:#ababab; 
 
    padding-top: 5px; 
 
} 
 
.totblockhtml.html_2 ul li { 
 
    display: inline-block; 
 
    margin-left: 70px; 
 
    font-size: 14px; 
 
    font-family:"trajanpro_regular"; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    position: relative; 
 
} 
 
.totblockhtml.html_2 ul li:first-child { 
 
    margin-left:0px; 
 
} 
 
.totblockhtml.html_2 ul li a { 
 
    color: #9099AF; 
 
    font-size: 11px; 
 
    font-family:"Cinzel"; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    -webkit-transition: color 0.5s ease; 
 
    -moz-transition: color 0.5s ease; 
 
    -ms-transition: color 0.5s ease; 
 
    -o-transition: color 0.5s ease; 
 
    transition: color 0.5s ease; 
 
} 
 
.totblockhtml.html_2 ul li a:hover { 
 
    text-decoration:none; 
 
    color: #fff; 
 
}

<div class="block totblockhtml html_2"> 
 
    <div class="block_content"> 
 
     <ul class="top_menu "> 
 
      <li class="top_menu_search cl-effect-15"><a href="#">Rechercher</a> 
 

 
      </li> 
 
      <li class="top_menu_sell cl-effect-15"><a href="#">Vendre</a> 
 

 
      </li> 
 
      <li class="top_menu_advice cl-effect-15"><a href="#">Conseils </a> 
 

 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

Вот код изменения непрозрачности:

.cl-effect-15 a::after, .cl-effect-15 a::before { 
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; 
    -moz-transition: -moz-transform 0.3s, opacity 0.2s; 
    transition: transform 0.3s, opacity 0.2s; 
} 

и вот один изменения размера шрифта:

.cl-effect-15 a:hover::before, .cl-effect-15 a:hover::after, .cl-effect-15 a:focus::before, .cl-effect-15 a:focus::after { 
    font-size: 14px; 
} 

Я установил размер шрифта до 12 пикселей и непрозрачность до 1, проверьте здесь: jsFiddle