Переход не работает на псевдоэлемент

Question

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

При наведении курсора, я хочу сделать границу с переходом в псевдоэлементе раньше. Я делаю код: http://codepen.io/Tef/pen/JYBMgR

<div class="container wrap"> 
<div class="row"> 
    <div class="box"> 
     <a href="#"> 
      <img src="http://placehold.it/90x90/000000" alt="" /> 
     </a> 
    </div> 
</div> 
</div> 

.wrap { 
    margin-top: 50px; 
} 
.wrap a { 
    position: relative; 
    display: inline-block; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    -ms-transition: all 1s; 
    transition: all 1s; 
} 
.wrap a:hover:before { 
    content: ''; 
    border: 7px solid #ffffff; 
    opacity: .7; 
    width: 90px; 
    height: 90px; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

Answer 1

Два основных вопроса здесь. Во-первых, вы добавляете переходный элемент привязки, а не псевдоэлемент «:: before». Во-вторых, вы не устанавливаете состояние для псевдоэлемента, вы все настраиваете на зависании. Если вы хотите перейти, вам потребуется начальное состояние и конечное состояние. Например:

.wrap { 
    margin-top: 50px; 
    a { 
     position: relative; 
     display: inline-block; 

     &::before{ 
      -webkit-transition: all 1s; 
      -moz-transition: all 1s; 
      -o-transition: all 1s; 
      -ms-transition: all 1s; 
      transition: all 1s; 
      content: ''; 
      border: 0 solid #ffffff; 
      opacity: 0; 
      width: 90px; 
      height: 90px; 
      position: absolute; 
      left: 0; 
      top: 0; 
     } 

     &:hover { 
      &::before { 
       border: 7px solid #ffffff; 
       opacity: .7; 
      } 
     } 

    } 
} 

Уведомления перехода на элементе псевдо, и я установить начальные значения для щёток состояния этого элемента (Непрозрачность: 0 + приграничные: 0)

Answer 2

Есть еще несколько вопросов, в вашем коде:

1. :before существует только на :hover, но она всегда должна быть там, чтобы показать анимацию.
2. transition определено на a, но должно фактически быть на a:before (что концептуально представляет собой другой элемент DOM).
3. Исходное состояние границы отсутствует, поэтому переход на зависание начнется только по умолчанию, а переход назад при отключении не будет работать. Чтобы решить эту проблему, просто добавьте начальное состояние границы, например 0px solid transparent.

Вот ваш неподвижный пример: http://codepen.io/anon/pen/wKxmvB