How to make CSS Animations | Imaginary Cloud

What are CSS animations?

  • at the left an hover effect using the transition property;
  • at the right a loading effect using the animation property.

Key elements of animations

Animation Timing

transition: all 0.5s linear 0s; animation: rotate 1s linear infinite 0.1s;

Inner Components

//HTML structure <div class="my_text"></div> /* CSS styling */ my_text { ... } my_text:before { content : " " ; ... } my_text:after { content : " " ; ... }
a { color: #FCD63F; font-size: 35px; text-decoration: none; text-transform: uppercase; padding: 5px 10px; margin: 0px 10px; position: relative; transition: all .5s } a:before { content: ""; position: absolute; bottom: -8px; left: -8px; width: 12px; height: 12px; border: 3px solid #FCD63F; border-width: 0 0 3px 3px; opacity: 1; transition: all 0.3s }
//HTML structure <div class="container"> <span></span> <span></span> <span></span> <span></span> </div> /* CSS styling */ .container { width: 90px; height: 90px; position: relative; animation: animate 1s linear infinite; transform: rotate(45deg); } .container span { position: absolute; width: 45px; height: 45px; animation: rotate 1s linear infinite; }

CSS transitions

Transition-property

transition: color 0.5s linear 0.5s, background-color 0.1s linear 0.5s; // instead of transition: all 0.5s linear 0.5s;

Transition-timing-function

  • linear, the velocity will be constant;
  • ease-in, it will start slow and then get faster;
  • ease-out, it will start fast and then get slower;
  • ease-in-out, a mix of the last two: it will start slow, then get faster and slower again;
  • ease, is a variation of the previous one and the default value of this property.

CSS animations and keyframes

@keyframes rotate { 0% {transform: rotate(0deg);} 10% {transform: rotate(0deg);} 50% {transform: rotate(90deg);} 90% {transform: rotate(90deg);} 100% {transform: rotate(90deg);} } span { position: absolute; width: 45px; height: 45px; animation: rotate 1s linear infinite; }

Animation-direction

  • normal, the animation goes from 0% to 100% (default value);
  • reverse, the animation goes from 100% to 0%;
  • alternate, the animation goes from 0% to 100% and 0% again;
  • alternate-reverse, the animation goes from 100% to 0% and 100% again.

Animation-fill-mode

  • none, the component is set to its default style;
  • forwards, after the animation is complete, the component will remain as the animation left it;
  • backwards, before the animation starts, on delay time, the component will immediately take the style defined at the start of the animation.
  • both, before and after the animation, the component takes the style the animation defines.

What CSS properties can be animated?

Transform property

  • translate ( x , y ) — Move an element x pixels horizontally and y pixels vertically. Negative values will move left or up and positive ones will move right or down.
  • rotate( y ) — Rotate an element y degrees. Positive values for clockwise and negative for counter-clockwise movement. The effect will happen over the center of the element by default, change it with the transform-origin property.
  • scale( x , y ) — Alter the size of the element. Given two values, x and y, it will change the width of the element x times and the height y times. Given only one value, like w, it will change both width and height w times, keeping the initial proportion of the element. It can be used scaleX( x ) and scaleY( y ) to only target width or height correspondingly. Values above 1 make the element bigger and between 0 and 1 smaller.
  • skew( x , y ) — skews the element x deg horizontally and y deg vertically. You can specify only one value, but the effect will only affect the X-axis, the y will be set to 0. Just like scale, you can specify this action for the X and Y-axis individually with skewX() and skewY().
  • matrix( scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY() ) — the matrix allows to easily combine all the methods above.

Performance of CSS Animations vs Javascript

Conclusion

Found this article useful? You might like these ones too!

--

--

Applying our own Product Design Process to bring great digital products to life | www.imaginarycloud.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Imaginary Cloud

Imaginary Cloud

Applying our own Product Design Process to bring great digital products to life | www.imaginarycloud.com