CSS Transitions And Animations. Motion Path Module CSS

Written by Ruslan
CSS Transitions and Animations. Motion Path Module CSS

Before CSS3 rising, front-end developers were tossed into a cold sweat, when they heard a word «animation». And all because one reason: it was very non-trivial task to make quality and beautiful animation at those old days. CSS could not do it, so all the animations were made with JavaScript. We’ve had to shovel a lot of forums to find the same fellow sufferers, and to spend a lot of time on development process, but in the end you might hear from your lead designer: «All right, could be worse.» And when finally CSS3 went to release state, the fireworks were shot hard until the morning, and the champagne flowed like a river. It was a memorable day for all web developers (the next such day was when Microsoft announced the termination of Internet Explorer support). With the advent of CSS3, many previously challenging issues turned into a simple and pleasant tasks. The same applies to animations in CSS.

CSS Transitions

CSS transitions make it possible to change the CSS properties smoothly and for some time. So you can control the process of element transition from one state to another. Let's start with the simplest example, and continue on.

When you hover over the square, the background color slowly changes.

Now let us consider in detail how to manage transitions in CSS. We have 5 properties that allow us to control transition animation:

  • transition-property;
  • transition-duration;
  • transition-timing-function;
  • transition-delay;
  • transition;

transition-property specifies a list of properties that will be animated. Unlisted properties will vary in the usual way. You can animate all of the properties for a particular element, specifying the value as «all». If you do not specify any properties, the default value will be «all» anyway.

Example:

transition-property: width;

transition-duration specifies the value the length of the animation in seconds or milliseconds.

Example:

transition-duration: 1s;

transition-timing-function is a time related function that indicates the acceleration and deceleration for a certain period of time to control the animation speed changing. Simply, by using this property, you can specify the behavior of the animation. For example, we can speed the animation up at the beginning and slow it down at the end, or vice versa. In order to set the animation process, Bezier’s curves are used. In general, transition-timing-function allows to do a lot of different behaviors for the animation.

Example:

transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay sets the time delay before the animation start. Its value can be specified in seconds or milliseconds.

Example:

transition-delay: 500ms;

transition is a common feature that allows you to list the first four properties in this order: property, duration, timing-function, delay.

Example:

transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

Here we have a simple animation: when you hover the mouse on the square, the width varies; the duration of animation is one second; animation is reproduced by a linear function; prestart animation delay is 500 milliseconds.

With CSS transitions you can animate almost all of the properties, and create a lot of interesting, beautiful, functional and even complex animations that will complement and enhance your project. For example, I've made a Material-FAB with pure CSS using transitions:

CSS Animations

CSS animations allow you to do more complex animations, rather than CSS transitions. @keyframes are the key. @keyframes rule allows you to create animations using a set of keyframes, ie, it describes the state of the object at a particular time. Here's a simple example.

Our circle came to live with a pulsation.

There are 9 properties that allow you to control the CSS animations:

  • animation-name;
  • animation-duration;
  • animation-timing-function;
  • animation-delay;
  • animation-iteration-count;
  • animation-direction;
  • animation-play-state;
  • animation-fill-mode;
  • animation;

animation-name specifies the name of the animation, which connects @keyframes rule with a selector.

Example:

animation-name: my-animation;
@keyframes my-animation {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

animation-iteration-count specifies the number of animation repetitions, the default value is 1. Value «infinite» means that the animation will play indefinitely.

Example:

animation-iteration-count: 2;

animation-direction defines the direction of the animation.

Example:

animation-direction: reverse;

animation-play-state. This property controls the stop and play of the animation. There are two values, running (the animation plays , it's on by default), and paused (animation stops).

Example:

animation-play-state: paused;

animation-fill-mode sets CSS-properties that are flattening to the object before or after animation. It can take the following values:

  • none — animated CSS-properties are applied to the object during playback of animation, at the end the object the returns to its original state;
  • forwards — animated CSS-properties are applied to an object after animation has finished playing;
  • backwards — animated CSS-properties are applied to the object before starting playback of animation;
  • both — animated CSS-properties are applied to the object prior to and after the animation plays.

Example:

animation-fill-mode: backwards;

Properties of animation-duration, animation-timing-function, animation-delay work the same way as similar properties at CSS transitions, about which I wrote before, so I will not repeat it.

You can create a rather complex animations without JavaScript using animations CSS. A striking example is loaders, ie elements which show that something is loading on your page. I made some examples:

CSS Motion Path Module

In CSS Motion Path Module Level 1, the spotlight shines on an intriguing module called MOTION PATH.

CSS Motion Path empowers developers to control an element's animation along a specific path, offering flexibility in animation design. Before we explore Motion Path, let's revisit how traditional CSS handled linear and curved path animations.

CSS Traditional Linear Path Animation:

Moving an object from point A to point B in a straight line was achieved using properties like transform: translate() or top | left | bottom | right.

CSS Traditional Curve Path Animation:

For curves, developers used a workaround involving transform: rotate() on a parent element to create the illusion of a curved path.

CSS Motion Path for Linear Path Animation:

The CSS Motion Path specification introduces properties like offset-path, offset-distance, and more for precise control over linear path animations.

div {
    width: 60px;
    height: 60px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path("M 0 0 L 100 100");
    offset-rotate: 0deg;
    animation: move 2000ms infinite alternate ease-in-out;
}


div@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}






CSS Motion Path for Curve Path Animation:


Achieving curve path animations is simplified using an SVG path, such as a Bezier curve.



div:nth-child(2) {
    width: 40px;
    height: 40px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
}


@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}



Mastering offset-anchor


The offset-anchor property allows precise control over which point of an element moves along the path.



.ball {
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
    offset-anchor: 0 100%;
    background: linear-gradient(#fc0, #f0c);
    animation: move 3000ms infinite alternate linear;
}


@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}


Practical Applications:



Button Effects with CSS Offset Paths:


    

  • Create button click effects with animated dots following a specified path.
    • 



Pathfinding Animation on a Map:


    

  • Implement a wayfinding animation on a map using CSS Motion Path.
    • 




Compatibility


CSS Motion Path is widely supported, excluding Internet Explorer. Consider browser usage within your target audience.






For those who still do not understand, how it works, or who wants to better deal with it, I have made an example.