WAPG 2 keyframes Animation Programming CSS JavaScript

Learn keyframes animation programming with CSS and JavaScript.

[critnasty]

It's funny... when I find I appreciate and respect the YouTuber, I watch the entierty of the ads they have, just to make sure the tuber is getting paid 😌👍🏻

[brandtjryan]

This is the only decent, from the ground up, WAAPI course - with the added bonus of you're being an excellent teacher! Any chance you could do another reflecting the current state of the WAAPI (Element.animate())?

Due to lack of tutorials, I've been having to use MDN Docs, and even the specification to understand things - or should I say, to get more confused.


I really like the slides you show about, e.g. animatable css properties, the overall technologies used (DOM API, WAAPI, CSS, etc.) It would great to have slides that break down "Animation", "AnimationEffect", "AnimationEvent", "AnimationPlaybackEvent", "AnimationTimeline", "DocumentTimeline", "KeyframeEffect", etc.

A lot can be inferred from this course, but I'm finding myself getting lost.

[paulosilva-dmqb]

U were born to teach.think of itand we thank u for that.

[kolby]

good video im only 12 and i love CSS transitions thanks you ive been watching your channel since i was 10

[DimitriBoyarski]

Wow, that's so awesome, possibilities are endless!

[hamidcoolboy]

This was very well done. A big thumbs up to you sir. Good job.

[solmatrix]

awesome video Adam this clears up my understanding of keyframes

[jaykay]

Superb tutorials .Many thanks for you Adam Khoury..

[ronaldravelo]

How would you stop the animation? I'm trying animation-play-state = paused and it isn't working. Video reference at 27:00

[AMStudio]

You Still the Best Adam <3 thank you for everythings

[RagHelen]

Adam, could you cover queued animations? As I have learned recently, the SMIL animation method, which has an easy way to time animation, is deprecated for SVG and CSS animation recommended.

[edwinlemeilleur]

I learned how to use PHP, mysqli, vanilla js, html, css, raw ajax, etc through your videos and now I'm finding out that there are faster, more efficient, and technologies that make web applications more scalable like nodejs, react, angular, express, mongodb, django, ruby on rails, java servlets, jsp pages. Is this true? I'm a fan of PHP since it's easy. it's sad to have to move from LAMP to MEAN stack and those teachnologies are harder to learn. Will you ever be making tutorials on these newer and apparently better technologies?

[alexandertkaczyk-harrison]

you're awesome dude, this helped so much!!

[katty]

this might help me with an automatic slide show I'm working on

[ejlogos]

I don't know if this is a tutorial that is monitored or not. But I have a question.
My animation ID is #menu
my CSS is: #menu { animation code, animation-play-state: paused; }
my JavaScript is: style.animationPlayState = "running";
my Button ID:menu, is clicked and does what it is supposed to do. Except that my code above doesn't play the animation as expected.
Thoughts?


I understand that my approach is different as I don't use the - method.

Background on JS on my CSS:
When I click the buttons, the background image changes from "hamburger" to "X". At this time, my JS does if "hamburger" then change to "X" and play animation. Play animation isn't triggered.


This isn't working: pseodocode


If (hamburger)
style.animationPlayState = "running";
else
style.animationPlayState = "paused";

[keidigjika]

Hi you guys, Hi Adam. I keep getting an error that i wanna solve, it seems that i cannot access the keyframes and append a new Rule. just alerts undefined and it says appendRule is not a function which i can assume it means that CSSKeyframesRule is not being accessed. and i have had my JS and my CSS in separate files, but even when i put them in the same .php file, it still does not work. Can anyone help me solve this problem?

[imtheevil]

What do you think of bootstrap, angular js ?

[falconemik]

very, very impressive!
thank you very much!

[ahmedabdelraheem]

can you help me ... i have problem with cash.js when i used it and jquery in the same page

[worldofstrings]

outstanding!!! do you have to use the webkit  syntax anymore?