Анимация при наведении, затухание, непрозрачность 0,5, непрозрачность при наведении 1 ⇐ CSS

[Anonymous]

Изначально у меня было поле, которое меняло непрозрачность с 0,5 до 1 при наведении курсора мыши через переход. Это работает хорошо.

Теперь я хочу добавить анимацию отсроченного появления в начале с непрозрачностью от 0 до 0,5. К сожалению, переход при наведении курсора мыши больше не работает.

Я ценю каждую идею

Код: Выделить всё

.box {
width: 200px:
height: 50px;
padding:20px;
background-color: red;
transition: 1s ease;

opacity: 0;
opacity: 0.5 \9;
-webkit-animation:fadeIn ease-in 0.5;
-moz-animation:fadeIn ease-in 0.5;
animation:fadeIn ease-in 0.5;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;

-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}

.box:hover {transition: 0.5s; opacity: 1;  }

Код: Выделить всё

This is a Box

Подробнее здесь: https://stackoverflow.com/questions/456 ... -opacity-1