How To Create CSS Animations In The Browser Using DevTools
Talking about css animations, if you want to create better products, you have to switch to the right tools, but still use pure css.
This video is about decodela animation editor and why conventional css animations can not deliver this kind of quality.
By the way my name is Petar Apostolov.
As a software inventor I have created thousands of features, dosen apps, platforms and libraries. But the source of my knowladge is not the sucess, it's my failures.
What is css animation?
CSS animations make it possible to animate transitions from one CSS style to another. They consist of keyframes that indicate the start, the end, as well as points in the middle.
That's enough to create everything.
But professional css movies consist of multiple animations on multiple html elements. This makes it very hard to maintain code that size.
In oposite, the animation editor focus on the preview. You design the keyframes directly in the browser, without messing with huge css files.
But does the animations count matter?
No. Good naming convention and strict order can improve code maintanence. What really hurts is to synchronize all of the animations into a single movie. Using animation-delay, for that number of animations couples the whole thing, therefor one change breaks everything.
The graphical interface of the editor solves this problem. Sliding html designs is much easyer than dealing with huge code for animations, per element, per frame. Seeing the result while editing improves the precision, increase the speed, lifts the level of quality.
But code editing is way powerful than any UI.
The lower the level of access is, the higher flexibility for changes we have. But this is not disadvantage. Just the opposite. While standard source-code editors are great environment for code development, css animation editor provides something way better - browser's development tools. Compatability with the best instrument for html and css manipulations, makes the editor better choice for experiments and precision.
If you have aweseome css animations in mind decodela.com is free option to create and share them. I can't wait to see your work. Share link in the comments, and wait for more vides in the future.
Thank you!