Сохранение последнего ключевого кадра свойства в CSS анимации

Question

У меня есть DIV с текстом:

<div>Rain.js</div> 

и его CSS:

div { 
    -webkit-animation: fadein 2s; 
    color:black; 
    font-size:70px; 
} 

Я хочу сделать div фейдера, так что я сделал анимацию fadein изменить opacity в div от 0 до 0,1

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 0.1; } 
} 

Как видите, herefadein от opacity От 0 до 0.1 происходит через 2 секунды, как ожидалось. Но через 2 секунды непрозрачность идет от 0,1 до 1.

1) Почему это происходит?

2) Как я могу предотвратить это?

Answer 1

Вы не добавили animation-fill-mode: forwards сохранить конечное состояние анимации.

Поскольку в ваших правилах CSS нет свойств по умолчанию для непрозрачности, а animation-fill-mode по умолчанию - нет, элемент принимает значение непрозрачности по умолчанию 1 после завершения анимации.

JSfiddle Demo

div { 
 
    animation: fadein 2s; 
 
    color: black; 
 
    font-size: 70px; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 0.1; 
 
    } 
 
}

<div>Rain.js</div>

Answer 2

Когда анимация заканчивается, она ставит div в его состояние opacity по умолчанию, которое не установлено. (поэтому он будет 1).

Добавить в свой CSS на div:

opacity: 0.1;

Демо: http://jsfiddle.net/qm3f6717/1/

Answer 3

После FadeIn сделано, DIV принимает на своих заданных значений.

Вам просто нужно сделать непрозрачность div равным значению непрозрачности ключевого кадра.

div 
{ 
    -webkit-animation: fadein 2s; 
    color:black; 
    font-size:70px; 
    opacity:0.1; 
}