CSS3 Animations

[bytegeeks]

Ano ang CSS Animations?
Isa itong bagong feature ng CSS3 for modern browsers to animate properties of an element. Currently, it is in the “Working Draft” state, which means na di pa lahat ng browsers implemented na ito, pero expect it to be implemented in all browsers in the future.

2. Bakit ko sya gagamitin?
Sa mga marquee lords ng mga last decade, tuluyan na syang pinatay at nilagay na sa obsolete list of elements in HTML5 , which means, di na sya working for modern browsers, at wala na kayong makikitang nakakairitang text na nagsslide sa browsers.

Maganda rin gamitin ang CSS3 animations if gusto nyo lang maganimate ng simpleng animations without the use of JS, specially, if you want it to repeat infinite times, similar to a GIF. Pero as of now, you can only do this on specific browsers, which is a downside, but you can still practice it!

3. Paano sya gamitin?
Madali lang! just pick an element to animate, let’s say a div with a class “red-box”

.red-box{
      /* sample dimensions lang */
     width: 256px; height: 256px;

     /* add a background color, syempre, red-box nga eh */
     background: #f00;
}

then add an animation property to it.

.red-box{
    width: 256px; height: 256px;
    background: #f00;
   animation: turn-white 5s;
}

You might ask, "saan galing yang "turn-white" na words na yan", now this is where the fun starts.

Sa mga Adobe Flash, AE, Animate, Unity, 3DS Max or what have you tools na pinangaanimate, di makukumpleto ang animation kung wala ang mahiwagang “timelines” or “keyframes”. Sa mga di aware, ang “keyframes” is an epoch or an specific part of an animation’s duration where the properties of an object starts or ends in changing.

Sa CSS3, we use the @keyframes <name> to declare our keyframes/timelines. Sa example natin, our .red-box uses the “turn-white” keyframes. Assume na natin na this keyframes turns our red-box to white, how do we do that?

Here is an example:

@keyframes turn-white{
      0%{
          /* our first state, since want natin magsimula sa red color ang background */
          background: #f00;
      }
     100%{
         /* our end state, since want natin magend sa white color ang background */
          background: #fff;
     }
}

as you can see, para lamang itong, nested style sheet. You might ask again, ano yung 0% and 100%?, those value states the “progress” in the animation timeline. Any value from 0 - 100 can be used, kasi wala namang 101+ sa mga progresses. Sa example natin, there are 5 seconds for the animation timeline. 0% means there are no progresses, so it is in the very start of our animation. 100% means the end of the animation.

also do take note na these animations, e hindi biglang nagpapalit ng color at the end, no, it animates the color towards the end state. so at 0%, it starts at red and gradually changes to white until 100% of the progress in animation is met.

Take note that the animation property syntax goes like this:
animation:

<animation-name> <animation-duration> [<animation-timing-function>] [<animation-iteration-count>] [<animation-direction>][<animation-play-state>][<animation-delay>][<animation-fill-mode>]

Formal Syntax:

<single-animation>#where
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

4. Ano-ano po ba ang pwede ko ianimate?
Almost any property na ang value ay may numeric representation, pwedeng-pwede. it can be the margin sizes, padding, font-size, color, etc. pero take note, you can animate these properties, but it doesn’t mean you should!

5. So may warnings din po ba sa pag gamit?
Yes, there are.
Since these are animations, and are graphics-related, this can affect the performance of your end-user’s GPU(assuming na ikaw na ang magiimplement). Almost all of the properties that can be animated affects the performance, and also the website where it is implemented.

6. May tips ba kayo lodi?
Here are some tips mga paa:
- Thou shalt animate only two properties: transform and opacity.

In CSS, after the DOM Tree, is built, the CSSOM starts working, during this time, the CSSOM undergoes three stages: Layout, Paint and Composite.

In the Layout stage, the CSSOM starts building the layout for the website, or how the website will look like in skeletal form.

In the Paint stage, the CSSOM starts applying the styles or modifying how the element will look like. Dapat ba may red font color? Dapat ba may kulay ang borders?. Kumbaga sa mga 3D modelling tools, this is the rendering part.

In the Composite stage, the CSSOM finishes and starts showing the result of the previous stages.

If the CSSOM detects that an element is dynamically changed in properties, the CSSOM needs to start the stages again, if ne
cessary, so look out for the properties that affects these stages.

Does it matter? yes, it matters, specially if it affects the Layout stage. Kapag affected yan, it will be a domino effect. It turns out na transform and opacity are the only known properties that doesn’t affect neither the Layout nor the Paint stages.

- You can reuse the keyframes for different elements.
- Since the CSS3 Animations is still in WD state, you need to use vendor-prefixes.
- Hide animations or pause them if they aren’t needed.