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

Question

Если вы наведете элемент, переход будет работать, но не когда вы покинете элемент. Как я могу это исправить?

Это мой код и мой JSFiddle

.block{ 
 
    border: 2px solid grey; 
 
    border-radius: 4px; 
 
    height: 90px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 110px; 
 
    padding-top: 6px; 
 
} 
 

 
.fr:hover{ 
 
    -webkit-transition: all 0.4s ease 0s; 
 
    -moz-transition: all 0.4s ease 0s; 
 
    -ms-transition: all 0.4s ease 0s; 
 
    -o-transition: all 0.4s ease 0s; 
 
    transition: all 0.4s ease 0s; 
 
    position: relative; 
 
\t border-top: 2px solid rgba(150, 200, 200, 1); 
 
\t border-bottom: 2px solid rgba(0, 0, 0, 1); 
 
} 
 

 
.fr:before, .fr:after { 
 
    -webkit-transition: opacity 0.2s ease-in-out; 
 
    -moz-transition: opacity 0.2s ease-in-out; 
 
    -ms-transition: opacity 0.2s ease-in-out; 
 
    -o-transition: opacity 0.2s ease-in-out; 
 
    transition: opacity 0.2s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    background-image: linear-gradient(to bottom, rgba(150, 200, 200, 1) 0%, rgba(10, 20, 20, 1) 80%), linear-gradient(to bottom, rgba(150, 200, 200, 1) 10%, rgba(10, 20, 20, 1) 100%); 
 
    opacity: 0; 
 
} 
 

 
.fr:hover:before, .fr:hover:after { 
 
    -webkit-transition: opacity 0.2s ease-in-out; 
 
    -moz-transition: opacity 0.2s ease-in-out; 
 
    -ms-transition: opacity 0.2s ease-in-out; 
 
    -o-transition: opacity 0.2s ease-in-out; 
 
    transition: opacity 0.2s ease-in; 
 
    content: ""; 
 
    position: absolute; 
 
    background-image: linear-gradient(to bottom, rgba(155, 200, 200, 1) 0%, rgba(10, 20, 20, 1) 80%), linear-gradient(to bottom, rgba(155, 200, 200, 1) 10%, rgba(10, 20, 20, 1) 100%); 
 
    top: 0px; bottom: 0px; width: 2px; 
 
    opacity: 1; 
 
} 
 

 
.fr:before { left: -2px; } 
 
.fr:after { right: -2px; }

<div class="block fr"></div>

Answer 1

Здесь необходимо сделать много вещей. Во-первых, вы должны постоянно применять переходы к элементу .block .fr (поэтому он работает на мыши и в выводе мыши). Прямо сейчас вы только применять переходы во время :hover состояния:

.block { 
    /* Add `transition: all 0.4s ease 0s;` */ 
    /* Add `position: relative;` */ 
} 

.fr:hover { 
    /* Remove `position: relative;` */ 
    /* Remove `transition: all 0.4s ease 0s;` */ 
} 

Это позволяет более-эффекта нарастающий, так и снаружи. По-прежнему существует проблема с псевдоэлементами - они защелкиваются и выходят из состояний, а не переходят. Это связано с наличием свойств позиционирования (top, bottom и т.д.) на :hover состоянии, но не на статическое состояние:

.fr:before, .fr:after { 
    /* Add `top: 0px; bottom: 0px; width: 2px;` */ 
} 

.fr:hover:before, .fr:hover:after { 
    /* Remove `transition: opacity 0.2s ease-in;` */ 
    /* Redundant: `content: "";` */ 
    /* Redundant: `position: absolute;` */ 
    /* Redundant: `background-image: ...; */ 
    /* Remove `top: 0px; bottom: 0px; width: 2px;` */ 
} 

Когда все сказано и сделано, вот (примерно), что вам 'left left: https://jsfiddle.net/vn5hdn45/3/

Answer 2

Попробуйте положить переход на элемент перед парении так он переходит обратно в исходное состояние.

.fr{ 
    -webkit-transition: all 0.4s ease 0s; 
    -moz-transition: all 0.4s ease 0s; 
    -ms-transition: all 0.4s ease 0s; 
    -o-transition: all 0.4s ease 0s; 
    transition: all 0.4s ease 0s; 
}