Создание анимаций с помощью HTML и CSS

Виталий Зюзин Александр Першин

HTML Academy

В этом курсе студенты изучат основы анимации на CSS. Курс построен в виде интерактивной игры, где им предстоит пройти путь развития цивилизации, покорить космический простор и в финале запустить ракету на Луну.

Syllabus

1. Привет, animation!
2. @keyframes: раскадровка
3. @keyframes: from и to
4. @keyframes: группировка кадров
5. Множественная анимация, шаг 1
6. Множественная анимация, шаг 2
7. Водное путешествие
8. Количество проигрываний анимации: animation-iteration-count
9. Направление анимации: animation-direction, шаг 1
10. Направление анимации: animation-direction, шаг 2
11. Задержка начала анимации: animation-delay, шаг 1
12. Задержка начала анимации: animation-delay, шаг 2
13. Задержка начала анимации: animation-delay, шаг 3
14. Воздушное путешествие
15. Состояние до и после анимации: animation-fill-mode, шаг 1
16. Состояние до и после анимации: animation-fill-mode, шаг 2
17. Состояние до и после анимации: animation-fill-mode, шаг 3
18. Состояние до и после анимации: animation-fill-mode, шаг 4
19. Состояние до и после анимации: animation-fill-mode, шаг 5
20. Запуск фабрики, шаг 1
21. Запуск фабрики, шаг 2
22. Остановка и запуск анимации: animation-play-state
23. «Форма» анимации, animation-timing-function
24. animation-timing-function, шаг 2
25. animation-timing-function, шаг 3
26. animation-timing-function, шаг 4
27. Ракета на старт, шаг 1
28. Ракета на старт, шаг 2
29. Посадка, шаг 1
30. Посадка, шаг 2
31. Посадка, шаг 3

key words, tags

Html, CSS, анимации, веб-дизайн, веб-разработка


Course properties

Competition track
Science and engineering
Form of education
Nonformal
Formal education level
Secondary school, High school, College (university) entrance prep, Undegraduate
Recommended age for informal learning
11-15, 16-18, 19-25, 25-45
Learning language
Russian
Discipline
Information and Communication Technologies (ICTs)
Course authors
Виталий Зюзин Александр Першин
Author’s characterization
Виталий Зюзин, автор курсов и преподаватель в HTML Academy Александр Першин, основатель HTML Academy и доцент кафедры компьютерных образовательных технологий ИТМО
Organization
HTML Academy
Organization characterization
ООО "Интерактивные обучающие технологии"
Knowledge level entrance requirements
Базовые знания HTML и CSS
Output knowledge, abilities, skills
После прохождения курса студенты научатся передвигать, поворачивать и видоизменять объекты, управлять скоростью и траекторией движения объектов, изучат существующие формы анимации и смогут выстраивать композиции из анимированных объектов с помощью HTML и CSS.
Career list corresponds to course
HTML-верстальщик, веб-дизайнер
Entrance test
Groups formation by readiness level
Teachers presence
Tutors presence
Facilitators presence
Training materials forms
texts, multimedia, interactive games
Interactivity in training materials
Collaborative learning presence
Practical activities
project
Discussions, forums presence
Webinars, video conferences presence
meetup presence
LMS integration
Learning Analytics
Certification presence
Course time limits
Learning types (sync/async)
asynchronous
Personal learning path possibility, course individualization
Operating System
Windows, MacOS
Supported browsers
Chrome, Firefox, Safari, Internet Explorer, Edge
Special needs support
Learning technologies
Gamification, Virtual worlds, Web based training

Comments


cimba@mail.ru | 30-09-2017
Легко, просто, понятно! Очень хороший курс
ol_pav_mi@mail.ru | 15-09-2017
Хорошее подспорье для учителей, изучающих эту тему вместе с детьми на уроке или кружке. Для самостоятельного изучения будет сложновато, мало теории. Практическая часть изумительная!
evyakushina@gmail.com | 14-09-2017
Очень понятное объяснение, всегда можно посмотреть правильный ответ, что также является обучающим моментом, особенно для новичков.