Как сделать, что-бы проигрывалась анимация при первом показе элемента на экране?

Question

[IvanKolyadich]

Здравствуйте, хочу сделать на сайте так, что-бы когда у пользователя на экране появился блок HTML, проигралась анимация элемента. Подскажите пожалуйста, как это сделать или дайте ссылку на сайт с данной информацией. Должно получиться примерно так:

@keyframes about-placing {
    0% {
        margin-left: -50%;
    }
    100% {
        margin-left: 0%;
    }
}

Желательно без Animate.css и WOW.js

Comments

[MrColdCoffee]

блок появляется при прокрутке или при нажатии?
в любом случае можно сделать через добавление класса
блок без класс -> какое-то действие -> добавление класса с анимацией или другим стилем

например на css без анимации:

.about-block{
position:relative;
margin:left:-50%;
transition:.5s;
}
.about-block.shown{
margin-left:0;
}

[IvanKolyadich]

MrColdCoffee, хорошо, а какой-то код jquery есть?

[MrColdCoffee]

IvanKolyadich, Вот очень хорошая статья!

[IvanKolyadich]

MrColdCoffee, спасибо большое, всё работает

Answer 1

[wadowad]

Если блок находится вверху и сразу виден при загрузке страницы, то просто назначьте этому блоку Вашу анимацию:

.my-class {
	animation-name: about-placing;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: backwards;
	animation-delay: 1s;
}

Если же блок находится внизу, то нужен js, чтобы присвоить класс, когда страница будет прокручена до него. Это легко пишется, например, на jquery.

P.S. Рекомендую анимирование margin'а заменить анимированием transform: translate - будет работать плавнее и быстрее.