CSS Transitions and Animations. Motion Path Module CSS
by Ruslan Khomiak, Front End Developer
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:
Motion Path Module
Motion Path Module CSS allows to create routed movement of the objects through a special motion-path property. Previously this kind of animation could be done only with the help of SVG or complex scripts.
This specification has 3 properties:
- motion-path;
- motion-offset;
- motion-rotation;
motion-path allows you to specify the points (coordinates), on which the object will move. The syntax is the same as in the SVG-attribute path.
Example:
motion-path: path('M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z');motion-offset causes the object to move from the start point to the end point. It adopts a double-length value or percent. For the object begin to move, you need to determine the animation that will go from 0 to 100%.
Example:
@keyframes airplane-fly {
0% { motion-offset: 0; }
100% { motion-offset: 100%; }
}motion-rotation allows you to specify, which side forward the will move. You can specify «auto», «reverse», or a value in degrees ( ’- 45deg’, ’30deg’, etc).
Example:
motion-rotation: auto;Unfortunately, for now motion-path is supported only in Chrome and Opera, but we hope that other browsers will soon do the same, because this thing is really useful.
For those who still do not understand, how it works, or who wants to better deal with it, I have made an example.
Originally published at stfalcon.com.
