Have you ever thought about the fastest way to generate real declarative CSS animations with no extra dependencies and less writing? I bet you have gone through lots of different articles and you mostly saw names, but not sure how it really works! Let me help clarify the situation.
CSS3 allows us to write declarative animations, but how does that work? To start there are basically 2 ways: using Transitions and Animations:
Transitions
Transitions are the fastest way to configure changes in HTML elements. You can select any auto-start trigger for the transition, where hover and focus are good examples. In your styles.css file, you can write it in 2 ways, the first is more verbose, and the second is more concise. They behave exactly the same and you are free to choose the one you prefer, but I personally use the second smaller approach more:
a) Transitions CSS Verbose
.my-class{
transition-property: all; /*(options: all | background-color | width | color | etc...)*/
transition-duration: 1s;
transition-timing-function: ease; /*(options: ease (default)| ease-in|ease-out|ease-in-out|linear|)*/
transition-delay: 0s
}
b) Transitions CSS with shorthand format
.my-class{
transition: background-color 1s ease 0s; /*(you follow the order: property, duration, timing and delay)*/
}
This format works pretty well and is very straightforward. So I recommend using it how it is defined.
Things change a little regarding the second approach, which is using the keyword “animation”.
This feature is more complete and you can perform more elaborate animations, but unfortunately, it is also a little bit more laborious. Let’s see a simple example using the raw CSS API:
c) Raw Animation CSS with shorthand format
.my-class{
animation: my-keyframes 1s infinite
}
@keyframes my-keyframes{
0% {
width: 100px; height: 100px;
}
50% {
width: 200px; height: 200px;
}
100% {
width: 100px; height: 100px;
}
}This is the shortest form for using the animation keyword inside a CSS class. Note that you need to use this strange @keyframes notation and also declare each property’s values at each percentage step of the animation. We are passing the animation properties in-line with the shorthand format in the example above, but we could also make it more verbose to declare each property (again, I’m more a fan of the short syntax)
d) Raw Animation CSS – full properties
.my-class{
animation-name: my-keyframes;
animation-duration: 1s;
animation-timing-function: ease; /*options: (ease|linear|cubic-bezer)*/
animation-delay: 0s;
animation-iteration-count: infinite; /*options: infinite, 1, 2 ...*/
animation-direction: normal /*options: normal|alternate-reverse|reverse*/
animation-fill-mode: forwards /*options: forwars | none | backwards | both*/
animation-play-state: running /*options: running | paused*/
}
@keyframes my-keyframes{
0% {
width: 100px; height: 100px;
}
50% {
width: 200px; height: 200px;
}
100% {
width: 100px; height: 100px;
}
}When you are an experienced frontend developer, writing those animations may be a triviality, but for programmers having the first contact, it may be confusing using the extra verbose syntax, and also I always felt that this process of writing animations could be faster.
That’s when we at Flexiana decided to create a new Animations CSS framework/tool (yes, another one in the sea of daily javascript new tools =D, but I hope this one may deserve attention). It’s still in the early stage so expect it to evolve quickly.
It is called T-Animations 🎉🎉!! It’s inspired by two amazing CSS libraries: TachyonsCSS and TailwindCSS. They both are simple mnemonic CSS frameworks based on utility classes and basically, it means that you can write a little and get a lot done quickly (and also, since they both start with the same sound, I think it can fit T-Animations as well).
Your Animation
Let’s take a look at how you would write the same animation example. In your index.html file, add a class to your desired element that starts with “anim-“, in this way, T-Animations can recognize and parse it. Besides that, you can prefix it with “hover:anim-” to set the animation on hover (more prefixes coming soon.)
e) T-Animations class example @ index.html
<div style=”background-color: white; width: 200px; height: 200px; margin-top: 360px”
class="anim-0%-bgcolor-red-50%-bgcolor-yellow-100%-bgcolor-purple--3s-infinite">
</div>Please pay attention to:
anim-0%-bgcolor-red-50%-bgcolor-yellow-100%-bgcolor-purple--3s-infiniteIf you look it well, you will realize that it is a big string with words separated by dashes “-“, and there is only one double dash occurence “- -“. Let’s remove the “anim-” suffix and split at the double dashes “- -” to see what happens:
* 0%-bgcolor-red-50%-bgcolor-yellow-100%-bgcolor-purple
* 3s-infiniteThe main idea is to describe the keyframes’ steps using mnemonics before the the double dashes “- -“. You can see the string is composed of a percentage (e.g. 0%) followed by props values. The percentage goes from 0 to 100 and represent the steps for the keyframes. For the properties, it accepts the registered mnemonics and translates them to the final CSS respective. (For example, “h” is expanded to height and “w” to width.)
Also, after the double dash “- -” you can insert the animation properties just like you did in c) Raw Animation CSS.
It obeys the same laws of inline CSS animations order convention. Since the name is auto-generated, you can provide the time for the animation, followed by fill mode. You can always look at w3c docs and check the order of the properties, the defaults, and the options.
For the mnemonics, it follows Tailwind definitions, but can always check it by running the CLI.
Talking about Tailwind again, you might ask why not using Tailwind animations classes, since it is such a good tool? Tailwind performs fast for general CSS properties, but for animations, it defines default classes with default values like spin or bounce. If you want to specify those, you need to get your hands dirty touching lower-level config files. That is not about T-Animations, its purpose is to get performative specific animations without leaving your HTML file.
Now that you have added your t-animation class to the desired HTML, you can generate the final CSS file using the command
$ npx t-animations :input public/index.html :output public/t-animations.cssThe script execution doesn’t depend on any configuration file. It only depends on the arguments passed at the script call. The “:input public/index.html” is the html file one wants to write t-animation classes, and “:output public/t-animations.css” is the generated css file path.
Once you get the anim- classes properly structured at the HTML, the CLI will generate a new CSS file (probably at ./public/t-animations.css). All you have to do now is to include that in your HTML head:
<html>
<head>
<link rel="stylesheet" href="./t-animations.css">
</head>
<body >
<div style=”background-color: white; width: 200px; height: 200px; margin-top: 360px”
class="0%-bgcolor-red-50%-bgcolor-yellow-100%-bgcolor-purple--2s-infinite">
</div>
</body>
</html>While proper documentation is on the way, below is listed a few specific features one needs to know to full explore with T-Animations. We can’t use all symbols to compose CSS name classes, since some symbols were used for T-Animation “syntax”, so please be aware that:
- Decimal values are represented replacing dot by dash, so for example at “anim-0%-scale-0_5”, the prop is read as “scale: 0.5”;
- Negative values are written as “neg200px”, since the dash “-” is already used as words separator;
- As colors you can use hex colors with no problem (as anim-0%-bgcolor-#00FFFF);
- We can’t use the “%” symbol at the properties values (like left: 100% e.g.) because it would break the keyframes steps percentages parse. So we solve that using the mnemonic “cent”.. so instead of writing “l-100%”, we can call it like “l-100cent”. The last animation implements one example of this feature.
- It is also possible to replace 0% and 100% with “from” and “to”, just like you would with raw css;
- And if you would like to use a complex “transform”, (like calling translateX, translateY and rotate together), it’s possible separating each transform by a semicolon “;”, for example the transformation in “anim-100%-transf-rot0_5turn;translx500px;transly400px–3s-infinite” is parsed as “transform: rotate: 0.5turn; translateX: 500px; translateY: 400px”
Bellow you can see some T-Animations example classes, and the animations they generate.
Top button slide-in: “anim-from-o-0_3-mt-neg100px-to-mt-36px-o-1–3s-infinite”
Left button slide-in: “anim-from-o-0_3-ml-neg100px-to-ml-36px-o-1–3s-infinite”
Hover: “hover:anim-from-bgcolor-#34568B-scale-1-to-scale-1_5-bgcolor-#FF6F61–5s-infinite”
Multiple Properties: “anim-0%-w-10px-h-10px-rounded-0px-bgcolor-red-50%-h-20px-bgcolor-yellow-100%-rounded-100px-transf-rot1turn-bgcolor-purple-h-200px–3s-infinite”
Complex movements: “anim-0%-l-0-t-0-bgcolor-red-25%-l-90cent-t-0-50%-l-0-t-250px-bgcolor-yellow-75%-l-90cent-t-250px-100%-l-0-t-0-bgcolor-purple–7s-infinite”
And that’s it! The fastest way to generate real declarative CSS animations with no extra dependencies and writing less! Hope you found this tool useful, but if not, I hope at least it can serve as an inspiration to craftsmanship, and that you could learn more about how to do declarative animations in modern CSS.
