Libraries are optional, but web standard technologies are essential. Adapt to the new standard for web animation, Web Animation API, faster than others and apply it to your work right away!
CSS Animation
JavaScript Web Animation API
A web animation API that can be used for a long time.
Learn with 1 Minute Coding! 😎
If you agree with the conversation above, you should definitely study the Web Animation API! It is a standard specification that powerfully extends the web animation functions created with CSS to JavaScript . Therefore, it will be used more in the future. The great functions of libraries that first appeared for the convenience of our developers are continuously being implemented as standard technologies.
If you are working with web animation or will be working with it in the future, this is a must-learn web animation API. Get familiar with it by learning from now on!
Web Animation API is a standard implementation of web animation-related functions that were previously only possible using libraries. It is an API designed based on CSS animation implementation, and is characterized by simpler implementation while taking advantage of existing CSS animations.
✔️You can freely control CSS animations with JavaScript .
✔️ Since it is a web animation standard technology (Web Standard), once you learn it, you can use it for a long time.
Section 0
A brief conceptual overview of CSS animations, JS animations, and the Web Animation API.
Section 1
Before learning the Web Animation API, let's take a look at CSS Transitions.
Section 2
Before learning the Web Animation API, let's take a look at CSS Animation.
Section 3
Let's take a look at the basics of the Web Animation API.
Section 4
We'll explore how to control multiple objects at once, and even create a Starfield animation.
Section 5
Let's take a look at Motion Path, which moves an element along a desired path.
Section 6
We'll look at how to implement scroll-based animations with the Web Animation API, and create some useful examples to get you started.
After attending the lecture, you will
We'll answer your expected questions! 💬
Q. Is this a lecture that even beginners can take?
Anyone who knows the basics of CSS and JavaScript can do it. CSS Animation, which is the basis of the topics covered in the lecture, is also covered in the early sections, so I think it won't be a big problem to take the class even if you don't know much about it. Although it's not a JavaScript class, I'll explain the JavaScript concepts that appear here and there, so it won't be too difficult.
Q. To what extent does the class cover the content?
After learning the concepts of the Web Animation API, which is the subject of the lecture, I think it will be helpful for applying it to your projects as it covers examples ranging from basic to moderately difficult examples.
Q. How much growth can I achieve after taking this course?
You will be able to handle CSS Animations more powerfully using JavaScript . You will be able to develop high-performance web animations and UI movements more effectively.
Who is this course right for?
People who work with web UI
For those who want to implement web animation using web standard technology
For those who want to study how to implement high-performance web animations
Those who want to study the future standards of web animation in advance and apply them to practice right away
Need to know before starting?
CSS Basics
Basic knowledge of JavaScript
18,820
Students
1,157
Reviews
1,172
Answers
5.0
Rating
11
Courses
서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
인프런 강의를 만들 때는 언제나 "지루하지 않고 재밌으면서도 유익한 강의"를 만드는 것을 목표로 합니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.
개발자/디자이너/콘텐츠크리에이터
인스타그램 @studiomeal
All
48 lectures ∙ (4hr 58min)
are provided.