CSS Tricks

How to use CSS Transitions?

Css Tricks was the last peer learning developed on the course Fundamentals of Web Design. As a team we had to research and present to our colleagues how to use transitions in CSS effectively and also show examples to give a better understanding.

We started by explaining what CSS transitions are, rules in the code that allow to change values of the elements from a first to a second stage, making a smooth animation over a period of time between them, calculating automatically the infinite intermediate states.

Once the idea was clear, we jumped to the use and properties of CSS transitions which are:

  • Transition-timing-function with its different values: ease , linear, ease-in, ease-out and ease-in-out.
#div1{transition-timing-function: linear;}
#div2{transition-timing-function: ease;}
#div3{transition-timing-function: ease-in;}
#div4{transition-timing-function: ease-out;}
#div5{transition-timing-function: ease-in-out;}
  • Transition-delay which controls the time for the start of the transition after an event
div { 
-webkit-transition-delay: 1s;
}
  • Animated transitions
div { 
transition: width 2s, height 2s, transform 2s;
}

As many bits of code, transitions need the browser prefixes to allow their functionality across different platforms, so we also gave a quick insight in these.

-webkit-transition: /*for Chrome and Safari*/
-moz-transition: /*for Firefox*/
-o-transition: /*for Opera*/

Then we explained about transitioning states, getting a deeper look at the code that formed these transitions and explaining why the different elements needed to be coded in that specific way, along with which features these lines can perform and the grade of control we get over them. So for instance, we explained why the transition properties are located outside the :hover declaration since that is the trigger for the transition, mainly due to the need of having control of different elements in the same transition, without duplication.

a.foo {
transition:background 0.3s ease; /*Properties*/
}
/*Enables triggering the transition from either hovering or focusing the link (Keyboard, for instance*/
a.foo:hover, 
a.foo:focus {
background: #690;
}

We also covered the values all and (,) to perform multiple properties transitions to end with some examples of these different properties in a real web site.

a.foo {
transition:background 0.3s ease, color 0.2s linear; /*Properties*/
}
/*Background will take 0.3 secs while colour will only take 0.2 secs*/
a.foo:hover, 
a.foo:focus {
background: #690;
color: #030;
}

To finish the peer learning, we made our colleagues play a Kahoot game we prepared to refresh the concepts we talked across our presentation.