Как сделать анимацию блока?

Question

[anyachecka]

тоесть изначально блок скрыт
постепенно появляется
за 2s к примеру
https://jsfiddle.net/zs42Lcb3/

Answer 1

[Виталий Першин]

Например так:

Comments

[anyachecka]

Виталий, спасибо
а если делать через opacity
то что тут стоить поменять?
animation: block 2s linear forwards

[anyachecka]

Виталий, https://jsfiddle.net/kbxujwmr/

[Виталий Першин]

anyachecka,

@keyframes block {
    0% {
        opacity: 0;
    }
    100% {
         opacity: 1;
    }
}

[Виталий Першин]

anyachecka, Все верно

[anyachecka]

Виталий, так а тут стоит что менять что -то? если opacity
может есть лучше вариант
в этой строке animation: block 2s linear forwards

[Виталий Першин]

anyachecka, Лучшего варианта нет, есть тот который подходит или не подходит, почитайте про свойство animation и его значение, тогда поймете что именно вам нужно. forwards например это как раз то значение, которое по окончанию анимации оставляет последний кадр, то есть opacity: 1, иначе бы оно сбросилось на 0