In this last tutorial in CSS3, we will discuss CSS3 animations and the transform property. In our previous tutorial, we looked at fonts in web design. If you have not checked it out, you can visit here.

The transform property and CSS3 animations are used to add life to HTML elements during user interaction. It allows us to smoothly transition elements from one style to another without the use of JavaScript.

CSS3 animations have two major components: the animation property and the @keyframes at-rule.

@Keyframe at-rule

@keyframes is used to define each stage of the css3 animations process. Before applying the animation property, we should first define what should happen at each point of the animation. That is, from the beginning (0%) of the animation to the end (100%) of the animation.

This definition is usually created using the @keyframes rule. @keyframes could be seen as a transition timeline or sequence. It is a transition order that specifies the state of an element from the start of the animation to the end.

The simplest css3 animation has only two @keyframes at-rule: the start and end.

For example:

@keyframes myanim{
  0%{background-color: red;}
  100%{background-color: green}
}
#sti:hover{
        animation-name: myanim; 
        animation-duration: 3s;
}

When defining complex animations, you can have multiple @keyframes at-rule, from the start to the end.

For example:

@keyframes myanim{
  0%{background-color: red;}
  25%{background-color: orange;}
  50%{background-color: green;}
  75%{background-color: blue;}
  100%{background-color: silver; border-radius: 20px;}
}
#sti{
        animation-name: myanim; 
        animation-duration: 3s; 
        animation-iteration-count:3;
}

Creating CSS Animations

Animation property:

The animation property is used to control the @keyframes at-rule. It can be used as a shorthand for the following properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

animation-name: This is used to specify the name of the @keyframes at-rule to be controlled by the animation property. In the above example, this is the myanim.

animation-duration: This property is used to specify the length of time it will take for one cycle of the animation to complete. Its value is specified in seconds (s) or milliseconds (ms).

animation-timing-function: This is used to define the level of acceleration of the animation. It has the following values:

• ease (slow start, then fast and slow end. This is the default),
• linear (same speed from beginning to end),
• ease-in (slow start),
• ease-out (slow end),
• ease-in-out (slow start and end),
• cubic-bezier(x,x,x,x) (a cubic-bezier function that allows you to define your own transition function),
• steps(x) (animation is transitioned in the number of steps specified).

 animation-delay: This property is used to delay the animation so that it will not start as soon as it is loaded. Its values are specified in seconds (s) or milliseconds (ms).

animation-iteration-count: This is used to define the number of times a full cycle of animation is repeated. It’s has a default value of 1. Other values include infinite and a unitless number, say, 2, 3, …

animation-direction: This property specifies the direction the animation should play. Its values are:

• normal (default value),
• reverse (plays in reverse order or backwards),
• alternate (plays forward, then reverse), and
• alternate-reverse (plays backward first, then forward).

animation-fill-mode: This is used to set the style values before and after the animation plays. The values include,

• none (default value),
• forwards,
• backwards and
• both.

animation-play-state: This property is used to control the play mode of the animation, whether it should pause or run. It has the following values: running (default) and paused.

We may specify these individual properties or use the animation shorthand property. To use the animation shorthand property, do the following:

div{

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

}

For Example:

#sti{
  animation: myanim 3s ease-in infinite alternate;
}

The Transform property and CSS 3 Animations

The examples given above are simple. To perform more advance animations in CSS, we need to learn about the transform property.

The transform property is used to alter the original form of an element. To do this, we can scale, rotate, skew, or translate the element. This can be achieved using the 2D or 3D transform property functions.

The transform property can be written as follow:

transform: transform-function();

The transform property function can be any of the following:

• scale()
• skew()
• translate()
• rotate()
• matrix()

Multiple transform property functions can be combined in an element using white spaces. This can be written thus:

transform: transform-function() transform-function();

Let’s define the above transform functions.

• scale(width, height): the scale function is used to alter the size of the element. The default value is 1. Values below 1 scales element down and values above 1 scales element up. Specifying only one value means that both width and height will be proportionately scaled.
• skew(x, y): the skew function is used to distort an element along the horizontal axis(x-value). Or along the vertical axis(y-value), or on both axis.
• translate(x, y): the translate function is used to move an element along the x-axis or the y-axis. It works like a relatively positioned element.
• rotate(deg): the rotate function is used to rotate an element either clockwise or anti-clockwise. Element rotates clockwise between 0 – 360 degrees or anti-clockwise if the rotate value is negative.
• matrix(): the matrix function is used to combine all the 2D transform functions together.

2D Transform function Values

The 2D transform values include the following:

• scale()
• scaleX(): scales only the width of an element. Use unitless values.
• scaleY(): scales only the height of an element.
• skew()
• skewX(): skews element along the x-axis. Use degree values, e.g. 20deg.
• skewY(): distorts element along the y-axis (vertically) only.
• translate()
• translateX(): moves element along the horizontal axis only. Use length values or percentages.
• translateY(): moves element along vertical axis only.
• rotate()
• matrix()

The transform-origin property

The default transform origin is at 50% horizontally and vertically of an element. It is also called the dead center. This can be changed using the transform-origin property.

The transform origin property can take one or two values using any of length units, percentages or keywords. Just like the background-size property discussed in the box model.

Length values can be in px, em, etc, percentage values range from 0 to 100%, and keywords value includes the top left, bottom right, etc.

For example:

transform-origin: 25px 45px;

Examples of simple 2D transform is illustrated below.

3D transform values

The difference between the 2D transform and 3D transform values is the perspective property. The perspective is the vanishing point of an element in a 3-dimensional plane.

We can set the perspective property in the parent element or in the individual transform elements. We apply perspective in the parent element when we want to create a group of elements with the same perspective.

The perspective property can take none value or a length value. The higher the value, the further away the perspective appears. The lower the value, the closer the perspective appears on the plane. Use higher values to create low intensity and lower values to create high intensities.

You can also set perspective-origin property just the way transform-origin property is set. It takes the same values as the transform-origin property.

Therefore, in the 3D transform, we need to add another dimension called the Z dimension. The z-axis takes care of the depth of the element in the 3D plane, while the x and y values take care of the horizontal and vertical axis respectively as in the 2D.

The 3D values include:

The skew() function cannot be transformed in 3D, because element cannot be skewed in the z-axis. Other transform functions can be transformed in x, y, and z-axis respectively. Possible values for 3D transform include:

• scale3d(x,y,z)
• scaleX(x)
• scaleY(y)
• scaleZ(z)
• translate(x,y,z)
• translateX(x)
• translateY(y)
• translateZ(z)
• rotate(x,y,z,a): x, y, z = between 0 and 1. a = angle of rotation
• rotateX(xdeg)
• rotateY(ydeg)
• rotateZ(zdeg)
• matrix3d(): combines all the 3D transform values.

transform-style property

The transform-style property is used to maintain the 3D plane of transformed elements. It is usually placed within the transformed elements’ parent container. It has two values: preserve-3d and flat.

The preserve-3d value will permit the child element to transform in their own 3D plane. The flat value will make the transformed child element to be flattened in the 2D plane.

backface-visibility property

This property is used to show or hide the backface of a 3D transformed element. If a transformed element faces away from the 3D plane, then the backface-visibility value can be set to either visible or hidden values. The default value is visible.

Examples:

Conclusion

It is good to learn how to design wonderful websites. But in recent times when access to the internet is mostly done using mobile devices, a responsive website will do better.

One of the criteria to rank on Google is the responsiveness of a website. Google knows and is implementing it in their ranking factor. It is, therefore, necessary to understand and always implement this fact during web design.

We have come to the end of this 3-course series on Cascading stylesheets. The aim is to help you style your websites at every stage of progress.

We started this course with how to test your site for responsiveness. You can use all the methods or use the online method. This method allows you to test on different devices at the same time.

We then jumped to fonts. We looked on how to work with generic, custom and web fonts. We then did justice to CSS animations, after which we concluded with responsive websites.

I believe your following to this point is not a disappointment. I will want to attend to your questions. Post them in the comment for everyone to see and interact. I will also want to see your first website.

I will advise you to visit:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

for complete CSS properties reference.