Press "Enter" to skip to content

CSS animations and transitions tutorial part one

CSS transition and animation

While sorting thru a bunch of local files I stumbled upon some notes I made somewhere last year about CSS animations and transitions. I figured I’d share them with you.

source: DevTips on Youtube

Transitions syntax

.element { transition: [property][duration] [ease] [delay];}
.element { transition: opacity 300ms ease-in-out 1s;}

It is possible to chain multiple transitions, just replace the semicolon with a comma and
enter the values for the new property.

Examples of animatable properties

  • font-size
  • background-color
  • width
  • left

Examples of non-animatable properties

  • display
  • font-family
  • position (relative to absolute)

See here for a full list of animatable properties in CSS.

Performance

There are four things that browsers can animate cheaply:

  • Position transform: translate(npx,npx);
  • Scale transform: scale(n);
  • Rotation transform: rotate(ndeg);
  • Opacity opacity: 0...1;

Animating any other property can impact performance and chances are the animation will not be a smooth 60fps.
For a more in-depth explanation see this article on high performance animations
at HTML5rocks. The main key to take away here is that these four properties don’t cause reflows of repaints.

A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree. A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.

For more info on reflow and repaint check Stubbornela.


Practice time

Trigger a transform

The main two ways to make a transform happen are by having the hover pseudo class and by class changes.
There are many more ways but these two are the ones we will use below.

Using the hover pseudo class

.box {
display: inline-block;
background: pink;
width: 200px;
height: 200px;
/*The transition is on the element looking for a change in the transform (in this case) property.
When a hover happens the transition will kick in.*/
transition: transform 300ms ease-in-out;
}

.box:hover {
/*You put the destination of the style on the hover*/
transform: translate(200px, 150px) rotate(20deg);
}

There is a problem here when hovering over the box above: it jitters. This is because our target, the box
with the pseudo selector of hover is itself moving. This makes it hard to stay on the target to keep
the transform going. To combat this problem we can offload the hover onto another element.


.trigger {
display: inline-block;
background: #ddd;
width: 200px;
height: 200px;
border: 20px solid #999;
}

.box2 {
background: pink;
width: 200px;
height: 200px;
transition: transform 300ms ease-in-out;
}
.trigger:hover .box2{
/*When hovering the trigger element it will execute the transform property of box2*/
transform: translate(200px, 150px) rotate(20deg);
}

Notice that when hovering over trigger the hover effect is triggered but when hovering over box2
the effect is also active because box2 is a child of trigger. If this behaviour is unwanted you
can add pointer-events: none; to box2. This prevents the element of becoming a target of mouse
events.

Using class changes

CLICK ME


CSS:
.box3 {
background: pink;
width: 200px;
height: 200px;
transition: transform 300ms ease-in-out;
}

.clicked .box3{
transform: translate(200px, 150px) rotate(20deg);
}

javascript:

var trigger = document.querySelectorAll('.trigger');
trigger[1].addEventListener('click', function(){ this.classList.toggle('clicked');});

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *