Задача стоит следующая: после загрузки страницы плавно показать скрытый объект и оставить его видимым.
На данный момент: имеется некий объект класса "free". В таблице стилей указываю, что мне необходимо сделать анимацию объекта (изменить прозрачность с 0 на 1 за 2 секунды с задержкой в одну секунду). Делаю это следующим образом:
.free{
-webkit-animation-name: opacity1;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1s;
}
@-webkit-keyframes opacity1{
0% {opacity: 0;}
25% {opacity: 0.3;}
50% {opacity:0.5;}
75% {opacity:0.8;}
100% {opacity:1;}
}
Изначально прозрачность элемента равна "1", после чего он резко исчезает и заново появляется. Совсем не здорово.
Ввести начальное значение руками (opacity:0) не вызывает проблем. Проблему вызывает изменение данного свойства после окончания анимации на 1. Иначе, в этом варианте, объект после анимации принимает значение opacity:0, как и было введено.
Спасибо.