강의

멘토링

로드맵

BEST
Programming

/

Front-end

The new standard for web animation, Web Animations API

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!

(5.0) 41 reviews

836 learners

  • studiomeal
웹개발
animation
애니메이션
실습 중심
웹디자인
인터랙티브웹
Web Animations API
JavaScript
HTML/CSS
Interactive Web
frontend

Reviews from Early Learners

What you will learn!

  • CSS Animation

  • JavaScript Web Animation API

A web animation API that can be used for a long time.
Learn with 1 Minute Coding! 😎

Can be applied directly to practice
Web Animation API ✨

If you agree with the above, you should definitely learn about the Web Animation API! It's a standard specification that powerfully extends the CSS-based web animation capabilities with JavaScript . Therefore, it's expected to be used even more widely in the future. The impressive features of libraries, initially introduced for the convenience of developers, are now being continuously implemented as standard technologies.

If you're working with web animation or plan to work with it, the Web Animation API is a must-read. Get familiar with it now!

Web Animation API?

The Web Animation API is a standard implementation of web animation-related features previously available through libraries. Designed based on CSS animation implementations, it leverages the strengths of existing CSS animations while offering simpler implementation.

✔️ 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.


Preview the learning content by section 📚

Section 0

Let's take a brief conceptual look at CSS animations, JS animations, and the Web Animation API.

Section 1

Before learning the Web Animation API, let's take a look at CSS Transition.

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 elements along a desired path.

Section 6

We'll explore 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

  • You can develop high-performance CSS animations by leveraging web standard technologies.
  • You can gain knowledge that can be applied directly to practice through various application examples .
  • The Web Animation API allows you to develop powerful web animations and UI movements more effectively.

We'll answer your most anticipated questions! 💬

Q. Is this a course that even beginners can take?

Anyone with a basic understanding of CSS and JavaScript should be able to participate. CSS Animation, which forms the basis of the course's topics, is also covered in the early sections, so even if you're not familiar with it, you should still be able to take the course without much difficulty. While this isn't a JavaScript course, we'll explain JavaScript concepts that appear throughout, so you shouldn't have much difficulty.

Q. What level of content is covered in the class?

After learning the concepts of the Web Animation API, which is the subject of the lecture, we will cover examples ranging from basic to somewhat difficult ones, so I think it will be helpful for applying them to your projects.

Q. How much growth can I expect after taking this course?

You'll gain more powerful control over CSS animations using JavaScript , enabling you to develop high-performance web animations and UI behaviors more efficiently.

Recommended for
these people

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

Hello
This is

19,415

Learners

1,240

Reviews

1,175

Answers

5.0

Rating

11

Courses

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

Curriculum

All

48 lectures ∙ (4hr 58min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

41 reviews

5.0

41 reviews

  • highbilble20님의 프로필 이미지
    highbilble20

    Reviews 10

    Average Rating 4.6

    5

    96% enrolled

    근래에 1분 코딩님 새로운 강의가 없어서 이제 강의 안 올리시는 줄 알았는데 이렇게 좋은 강의 들고 와주셔서 너무 감사해요! 강의 들으면서 실무에서 바로 사용하고 있습니다! 강의가 이해하기도 쉽고 재미있어요! 너무 좋아용! 다른 강의도 자주 올려주세욯ㅎㅎ

    • 티라미수님의 프로필 이미지
      티라미수

      Reviews 18

      Average Rating 5.0

      5

      100% enrolled

      이전에 애플 강의는 따라가기 조금 어려웠는데 이거 보고 다시 반복해보려고 합니다!! 그림 설명이 너무 좋아요~

      • 1분코딩
        Instructor

        웹 애니메이션 API는 다루기가 간단해서, 더 쉽게 활용하실 수 있을 거예요 :) 감사합니다!

    • 웹개바르르님의 프로필 이미지
      웹개바르르

      Reviews 16

      Average Rating 5.0

      5

      100% enrolled

      gsap 라이브러리 말고도 웹 표준 기술로 스크롤 애니메이션을 쉽게 구현하니 좋네요 설명도 이해 잘 됩니다 감사합니다

      • th_kim님의 프로필 이미지
        th_kim

        Reviews 6

        Average Rating 5.0

        5

        100% enrolled

        이번에도 재밌게 학습할 수 있었습니다 앞으로도 많은 강의 부탁드리겠습니다

        • 1분코딩
          Instructor

          감사합니다 th_kim님! 계속해서 도움될만한 콘텐츠 만들어 볼게요 :)

      • 박의태님의 프로필 이미지
        박의태

        Reviews 14

        Average Rating 5.0

        5

        100% enrolled

        명불허전입니다. 최근 상업사이트에도 스크롤 애니메이션이 자주 사용된다고 느끼고 있는데, 이런 유용한 수업을 열어주셔서 감사합니다. 감사한 마음으로 공부해서 잘 사용하도록 하겠습니다. ps. 강의 불륨이 일반적인 음량보다 살짝 작게 되어있는 것 같습니다.

        • 1분코딩
          Instructor

          좋은 말씀 넘 감사합니다 의태님, 유용하게 활용하시길 바라겠습니다 ^^ 음량에 대한 피드백도 감사합니다!

      Limited time deal

      $49,500.00

      25%

      $51.70

      studiomeal's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!