Why you should not use CSS animations

I use and study CSS since 2004. The first lesson you learn from this web standard is that there are three layers for every structured web document, namely structure (HTML), presentation (CSS) and behavior (JavaScript). With the introduction of CSS animations the last two levels became mixed together. Browser vendors decided that CSS animations could be actually part of the presentation layer. This is totally wrong.

There's no clear distinction between JavaScript animations and CSS animations from a purely semantic point of view. If you write:

$('.animated').animate({
	left: 100
});

in JavaScript and then you have:

.animated {
	animation: move;
}

@keyframes move {
	from {
		left: 0px;
	}
	to {
		left: 100px;
	}
}

in your CSS, where's the actual difference? The above snippets both move an element from left to right. And if JavaScript is behavior and CSS is presentation, than one might conclude that this separation no longer exists and both layers are indefinitely tied together.

The only difference lies in performance: since CSS animations are implemented by using the browser's native code, they're considerably faster than their JavaScript counterpart.

Ignoring the separation between presentation and behavior just in order to jump on the latest web trend bandwagon is pure nonsense. Don't do that.