The CSS in brief:
The CSS, which stands for Cascading Style Sheets, is a scripting language that allows assigning styles to HTML elements. The innovative trait of this language is that it adds more ergonomics and more flexibility to the considered elements. Also, it makes applying other scripting languages more accurate and more effective. Besides, the CSS defines many properties to work with, notably position, color, borders, etc. And it uses some more complex functions which are transitions and animations.
The CSS transitions:
Transitions are elementary changes of states. In other words, they are just simple passage from an initial state to a final state. The frame sequence between the two states is created by the browser. Actually, transitions are practical when it is about creating simple effects. The mouse over (hovering) triggered sequences and fading events.
Besides, a transition syntax is simple. It is defined by:
– Transition-property: This defines the attribute to alter during the transition.
– Transition-duration: Specifies the overall duration of the transition.
– Transition-timing-function: designates the speed of the transition realization.
– Transition-delay: It specifies the time to wait before starting the transition.
The CSS animations:
The animations allow working on more than one property at once. There will be no major interferences. It is important to know that there must be an initial state which is the keyframe “0” and then, then, there will be the different steps of the animations as keyframes.
Besides, the CSS animations introduce the iteration, which refers to how many times the animation would repeat. Also, they come with the playing mode (forward, back…)
Somehow, the animations inherit the delay and timing properties from the transitions.
The CSS transitions intend to apply simple style modifications on the HTML elements. The animations are destined to create more complex style modifications. The fact is, CSS animations are nothing but groups of elementary transitions. Each elementary transition will then target a definite style.