Summary Animations

-1. Transitions-

Syntaxis.
The syntaxis is easier as writing the property “transition: …;” and adding a value of time, normally in “ms”.
We can understand transitions as that time in an object to pass from one state to another. For example the famous “: hover” in buttons.
There are some properties with transitions as:

• Transition-property: “property affected”
• Transition-duration: “time of the transition”
• Transition-delay: “time to start the action”
• Transition-timing-function: “flow of the transition”
• Transition: [property] [duration] [delay] [timing-function].

Iteration transitions.
It’s possible to put the transition to a father and through heritage, the property will pass to the children. It will be needed to adjust the state “b” for these last ones.

-2. Transform-

Syntaxis.
It will allow to move, escalate, rotate and cut elements. The property and it’s values are:

• Transform: [rotate(Udeg)] [skew(Udeg)] [translate(Upx)] [scale(0-1)]
  Rotation.
  A best practice due to the movement of the item, it’s to count on a father element in case the interaction is made by the cursor. In Rotation, we have several axes which are: “rotateX, rotateY, rotateZ (This is by default) and rotate3D (axisX, axisY, axisZ, deg). This last one it’s a shortcut to rotate all axis.
  Translate and perspective.
  It’s the movement of the element in the same layout. This value its divided due to the axis it affects.
• Transform: translate (axisX, axisY) or translateX/translateY/translateZ.
• (Shorthand) Transform: translate3d(X,Y,Z);
  In the case of using translateZ we need a property “perspective”, it’s the vanishing point that indicates how open or close this perspective will be. Also, you can change the perspective with “perspective-origin:”.
  Scale.
  This property affects the size of the element, one value by default will modify size by axis X and Y. the value goes from 0 to 1, where 1 is the 100% of the size.
  To do scale separately it’s needed to adjust values for both axes from 0 to 1. Something like “Transform: scale(0.5, 1)”.
  Skew.
  Size the inclination in deg of the element indicated. It does affect both axes, X, and Y. It can be modifying separately also, for example: “Transform: skew (40deg, 20deg);”.
  Transform origin point.
  All this transformation has and origin by default, it means there it’s a point where the transformation of the element takes place, this also can be modified.
  With “Transform-origin: 50% 50%;” by default, but it can take values as a top, bottom, or right. This origin it is situated on the cross of the X and Y axis, those are the two values it can take.

-3. Animation-

Syntaxis.
The keyword to use this fracture is “animation- “and this takes two parameters, a name and a time. So: “animation-name” and “animation-duration”.
Now it must be settled with “@keyframe nameOfAnimation {}”. Inside the brackets, it must be divided between initial state to final state: “initial state {} final state {}”.
There is also the properties:
• “animation-delay” – to create a delay.
• “animation-iteration-count” – to repeat the animation.
• “animation-timing-function” – to control the flow of the animation.
• “animation-direction” – to manage where to start and finish.
• “animation-fill-mode” – the state of the object after the animation is done.
• “animation-play-state” – pause or play the animation.
Acceleration and Bezier curve.
By default, there is an acceleration inside the animation. To modify this, it must be done by the property “animation-timing-function” with different values:
• “ease in”: it increases the speed when reaching the end.
• “ease-out”: it decreases the speed when reaching the end.
• “ease-in-out”: it increases until a mid-point to then decrease.
• “linear”: constant speed, no acceleration.
• “steps(unit)”: it divides the animation into steps, customizable.
• “cubic-Bezier (unit, unit, unit, unit): it manages the speed.
The cubic-Bezier can be hard to use, so it is recommending a webpage to customize your own curves  https://cubic-bezier.com/#.17,.67,.83,.67.
Multiple animations.
To add new animations it is just needed to add a second name in the property “animation-name” and a new keyframe “@keyframe newAnimation{from {} to{} }”.
Finally, to add values within their respective properties, it is only necessary to add these after a comma in the same property. It is meant that there is no need in creating new properties if it is applied to the same object.
Detect animation events from JS.
With JavaScript, it is possible to read the events of the animations as the end as the start or the iterations. To do so it has to be brought the element and apply “element.addEventListener” and this event will bring an object according to the specific event.
Optimize render with “will-change” and developer tools.
Thanks to the developer tools of the browser it is possible to modify and test the animations.
Also, we have the property “will change” that allows us to have better render. The value of this property is those it is wanted to improve the render. But this property is perfect for opacity and transform properties.
Animable properties.
Here a list of those properties able to be animated  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties .

-4. Animation API-

Element.animate
With JavaScript we can animate also an object, following the next methodology:
Element.animate(keyframes = [], option = {})
An example would be:
$ball.animate([ { Transform: ‘translateX(0)’ }, { Transform: ‘translateX(500px)’ } ],{ Duration: Delay: Direction: Easing: Iterations: Fill: iterationStart: endDelay: })
Manage animations.
The same “element.animation” in its prototype has several methods we can access and manage through JavaScript.