пользовательская анимация превращает непрозрачность элементов в 0, но может быть сохранена прозрачность элементов psedo до 1

Question

Я создаю пользовательскую анимированную кнопку и вам нужно использовать комбинацию простых переходов CSS-3 и элементов psedo.

Теперь мне известно о том, что на псевдоэлементы влияют объявления к элементу, к которому они прикреплены. но у меня есть контекстный вопрос с трудом, который у меня есть.

фон:

теперь у меня есть логотая анимация, превратить элементы непрозрачность до 0, однако я хотел бы его, если psedo элемент и его свойство могут быть сохранены визуально без тира непрозрачности быть изменены на 0.

вот скрипка: fiddle

видеть, как вместе с элементом диапазона превращается в непрозрачность: 0 элемент psedo тоже получает его opcaty повернулся к 0.

BTW, логотая анимация выглядит следующим образом:

@-moz-keyframes hidden { 
    0%{ 
     opacity: 0; 
    } 
    100%{ 
     opacity: 0; 
     transform: translateX(100px); 
    } 

} 

и код, который запускает пользовательские анимации выглядит следующим образом:

.btn:hover span{ 
    animation-name:hidden; 
    -webkit-animation-duration: 4s; 
    animation-duration: 4s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;  
} 

Я знаю, что если я захочу пойти без элемента psedo, будет решение, но мне бы очень хотелось сохранить элемент psedo в коде.

Спасибо.

Alexander.

Answer 1

Вы можете сделать это, перейдя rgba(Red, Greeb, Blue, Alpha) вместо opacity.

* { 
 
    box-sizing: border-box; 
 
    transition: .3s; 
 
} 
 
.btn { 
 
    outline: 0; 
 
    /*padding: 20px 0;*/ 
 
    border: 1px solid green; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.btn span { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    left: 0; 
 
    background: rgba(0, 255, 0, 1); 
 
    color: rgba(101, 141, 102, 1); 
 
    transition: all 0.5s; 
 
} 
 
.btn:hover span { 
 
    left: -100%; 
 
    background: rgba(0, 255, 0, 0); 
 
    color: rgba(101, 141, 102, 0); 
 
} 
 
.btn span:after { 
 
    background: red; 
 
    content: 'new content'; 
 
    position: absolute; 
 
    left: 100%; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
.btn:hover span:after { 
 
    color: rgba(101, 141, 102, 1); 
 
    margin-left: 6px; 
 
}

<button class="btn"> 
 
    <span>Hey press me</span> 
 
</button>