JavaScript RAF vs CSS @keyframes and Transitions

CSS @keyframes and transistions vs JS raf(dt)

Description

During pre HTML5 or CSS3 times, about a decade ago as of Janurary 2025, animation in css was not available. Interactive UI programming had to be done in JavaScript. Since then we have gained css animation capabilities. Most UI animation programming can now be done using CSS.

Programming UI in CSS can be easier. Another benefit of using CSS over JavaScript is that it will work for website visitors who have disabled JavaScript. These days, website visitors who disable JavaScript are just a small percentage of government employees. UI design capabilities in CSS is limited. The complication difference between CSS and JavaScript is nill if you have a solid understanding of JavaScript animation programming. We will gain a solid understanding of both CSS and JavaScript animation coding and programming here in this article.

There are two css animation tools available: @keyframes and transitions. We will demonstrate a sample animation performed using each of css @keyframes and transitions and performed manually by programming in javascript.

Audience

You are a web programmer interested in gaining insight into programming animations manually.

Usage

We will demonstrate animating a 50px div's margin-left and margin-top property within a 300px div container using CSS @keyframes, CSS transitions and Javascript raf().

Demo - CSS @keyframes Animation

REF paragraph 1: w3schools.com/cssref/atrule_keyframes.php

demo in it's own page: ./demo-css-keyframes

css file link: ./demo-css-keyframes/demo-css-keyframes.css

js file link: ./demo-css-keyframes/demo-css-keyframes.js

go right keyframe animation go down keyframe animation clear all keyframe animations

There are no start and stop controls within CSS. It just runs automatically. To make it controllable via a button, we instead add the class name for our @keyframes animation in JavaScript using the "Node.classList.add()" method. Once the animation is complete the property reverts back to it's orignal state; it goes right to the end and then resets back to it's original position.

CSS @keyframes animations only run once. Once you click the "go right" button, you can not click it again. As you can see in the JavaScript, the button handler adds the class name "redDiv_goRight" for the @keyframes animation we entered in CSS. You can click the "clear" button to reset it which removes any added class names. Then you can run the animation again.

So we see that CSS @keyframes animations are easy to code. They are one off; not controllable/repeatable. There are limited controls available. You can use JS to add/remove the class name @keyframes "name" to your div node make them controlable.

Demo - CSS transitions Animation

REF paragraph 1: w3schools.com/css/css3_transitions.asp

demo in it's own page: ./demo-css-transitions

css file link: ./demo-css-transitions/demo-css-transitions.css

js file link: ./demo-css-transitions/demo-css-transitions.js

go right transitions animation go down transitions animation clear all transitions animations

With CSS transitions they animating property does not reset back to the original settings. With that we can say that CSS transitions is more powerful than CSS @keyframes. We can already imagine making a variety of simple Tetris style games with just a few lines of code.

Again, as with CSS @keyframes, we see that there are limited controls available in CSS transitions.

Demo - raf timer

demo in it's own page: ./demo-raf-timer

css file link: ./demo-raf-timer/demo-raf-timer.css

raf Timer file link: ./demo-raf-timer/Timer.js

js file link: ./demo-raf-timer/demo-raf-timer.js

Programming in JS is more complicated requiring extra skills in UI programming. With those extra skills, we can easily program much more controls. We can easily program UI and games.

Summary / Conclusions

For most UI programming we will use CSS. For more complicated UI we will use JavaScript. With our JavaScript UI programming skills, we are just steps away from programming games.

Final Notes

We ended up half way there to making the Tetris game. We would need add rotations and collisions.