As we have seen in the recent tutorials about CSS, many nice visual effects can be created on your web pages entirely in CSS with no Graphics or JavaScript required. In this tutorial we’ll take a look at the animation capabilities built right into CSS3 to make effects that were only possible with technologies like Flash in the past. We can begin by looking at CSS Transitions which make it easy to make changes to a style happen smoothly over time. Next up we’ll have a look at Transforms. CSS Transforms can do things like skew, rotate, scale, and position elements. When combining Transitions and Transforms, some interesting animation effects are possible.

---

Transitions In CSS3

The effect that transitions provide is very much like what you see with jQuery. For example, if you hover the mouse over a particular link on a web page and the background color changes gradually from blue to green all the while acting very slick with various shades appearing during the change – that can be done with a CSS Transition. Transitions make changes that would otherwise be very sudden and abrupt to be smooth and slick. When used sparingly, transitions can add a nice polish to web pages.

---

Transition Property and Transition Duration

Let’s see an example of putting the transition-property and transition-duration properties to use. The transition-property property takes the name of the CSS property that you want to transition, or add an effect to. In the example below, we are adding a transition to the background-color property.

The transition-duration property defines how long it will take the transition to complete. In the example below, we set this to 1 second.

a.transition1 {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 1em;
    margin: auto;
    width: 20em;
    border-radius: 2em;
    background-color: blue;
    color: #fff;
    transition-property: background-color;
    transition-duration: 1s;
}

a.transition1:hover, a.transition1:focus {
    background-color: green;
}

---

Hover over the Super element to see the background-color transition in action.

---

Transition Timing Functions

Once you have a applied the transition-property and transition-duration properties to use on an element, you may further customize the behavior of the transition using the transition-timing-function property. This property is used to define how the intermediate values of the CSS properties being transitioned are calculated. The values that the transition-timing-function property accepts are as follows.

• ease Applies a transition effect which starts slowly, speeds up, then ends slowly. It is the default value.
• ease-out Applies a transition effect which has a slow ending.
• ease-in-out Applies a transition effect which has a slow start and slow ending.
• linear Has a consistent effect from beginning to end. Feels a bit robotic.
• ease-in Starts slowly at first, then speeds up.
• steps This interesting value divides the transition into a set number of steps.
• step-start Changes the state in one big step, right at the beginning of the duration timer.
• step-end Changes the state in one step, right at the end of the duration timer.

We can see these different values in action here. We have eight different boxes and each gets a different value for the transition-timing-function property.

p.timing-functions {
    text-align: center;
    line-height: 30px;
    background-color: #fff;
    border: 4px solid lightblue;
    margin: 1em auto 1em auto;
    width: 120px;
    padding: 10px 10px;
    font-weight: normal;
    transition-property: width;
    transition-duration: 3s;
    transition-timing-function: ease;
}

#transition-timing-functions:hover .timing-functions {
    width: 570px;
}

Hover over the container to see the width transition with different transition-timing-function values in action.

---

Adding More Transition Properties

You can add more than one CSS property as a value to the transition-property property, allowing you to create more sophisticated animations. For example, we are going to take our initial link which transitioned from blue to green, and we can add the border-radius property to our transition. In the snippet below, you can see we now have second CSS property added to transition-property. Note, that the transition-duration now also has a second time value. This means you can change the time it takes for each transition independently. For our purposes, we’ll have the background-color transition happen in one second and the border-radius transition happen in three seconds.

a.transition2 {
    margin: auto;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 1em;
    width: 20em;
    border-radius: 2em;
    background-color: blue;
    color: #fff;
    transition-property: background-color, border-radius;
    transition-duration: 1s, 3s;
}

a.transition2:hover, a.transition2:focus {
    background-color: green;
    border-radius: 0;
}

Hover over the Super element to see the background-color transition and border-radius transition in action.

---

That is pretty super! Now let’s take that idea little further. We can use the transition of a border-radius to turn a square into a circle. What’s more, we will also apply a transition to the letter-spacing and color of the font. We can create a perfect square with a horizontal and vertical center using Flexbox – then we add our transitions.

p.square-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: #fff;
    border: 10px solid lightblue;
    margin: 1em auto 1em auto;
    width: 300px;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: border-radius, letter-spacing, color;
    transition-duration: 1s;
}

.square-circle:hover {
    border-radius: 50%;
    letter-spacing: 10px;
    color: blue;
}

Hover over the square to change it into a circle.

---

Maybe you’d rather see a circle morph into a square. To do that, just set the border-radius to start at 50% and then transition to no border radius.

p.circle-square {
    display: flex;
    height: 300px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 10px solid lightblue;
    margin: 1em auto 1em auto;
    width: 300px;
    padding: 15px 15px;
    font-weight: bold;
    border-radius: 50%;
    transition-property: border-radius, letter-spacing, color;
    transition-duration: 1s;
}

.circle-square:hover {
    border-radius: 0;
    letter-spacing: 10px;
    color: blue;
}

Hover over the circle to turn it into a square.

---

This fun effect can add an inner border to an element by way of a box-shadow.

p.inner-border {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 30px solid lightblue;
    margin: 1em auto 1em auto;
    width: 100%;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: box-shadow, color;
    transition-duration: 1s;
}

.inner-border:hover {
    box-shadow: inset 0 0 0 30px lightskyblue;
}

Hover over the rectangle to add an inner border.

---

You can just keep stacking these transition properties if you like. In this one we’ll add a transition to the box-shadow, background-color, color, and letter-spacing of the element. It makes for a neat effect.

p.four-transitions {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 30px solid lightblue;
    margin: 1em auto 1em auto;
    width: 100%;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: box-shadow, background-color, color, letter-spacing;
    transition-duration: 1s;
}

.four-transitions:hover {
    box-shadow: inset 0 0 0 30px lightskyblue;
    background-color: lightcyan;
    color: darkblue;
    letter-spacing: 30px;
}

Hover over the element to see four properties transitioning.

---

Creating A Button Push Effect

We can use all of the techniques we have learned so far to create some cool push button effects on a flexbox menu.

html

<ul id="flex-menu">
    <li><a class="flex-item" href="">HTML</a></li>
    <li><a class="flex-item" href="">JavaScript</a></li>
    <li><a class="flex-item" href="">CSS</a></li>
    <li><a class="flex-item" href="">PHP</a></li>
    <li><a class="flex-item" href="">Linux</a></li>
    <li><a class="flex-item" href="">Windows</a></li>
    <li><a class="flex-item" href="">Cloud</a></li>
</ul>

css

ul#flex-menu {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

a.flex-item {
    display: block;
    margin: 5px;
    padding: .6em 2em;
    text-decoration: none;
    text-align: center;
    color: darkslategrey;
    letter-spacing: .2em;
    font-weight: bold;
    background-color: lightyellow;
    border: 5px solid lightgrey;
    border-radius: 6px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, .5);
    position: relative;
    top: 0px;
    transition: all .3s;
}

a.flex-item:hover, a.flex-item:focus {
    background-color: #ffe686;
    border-color: #ffd13f;
}

a.flex-item:active {
    top: 3px;
    box-shadow: 0 1px 2px darkgray;
}

Hover over a menu item, then click and hold to get the “button press” effect. The click and hold action gives the impression of a button actually depressing downwards as it is pushed.

• HTML
• JavaScript
• CSS
• PHP
• Linux
• Windows
• Cloud

---

CSS Transforms

The first section discussed CSS Transitions and the fact that they are the most simple way to add a smoothing effect on elements as they change between two states. Now we can have a look at CSS Transforms which are kind of the next level of power in CSS Animations technologies. CSS Transforms can transform your web page elements in all kinds of fun and interesting ways. We can do things like stretch an element, change the coordinates of an element, rotate elements, and more.

The transform CSS property is a doozy! It can accept a whole slew of values to modify the coordinate space of the CSS visual formatting model. Here are the list of values you can use with the transform property.

• rotate() Rotates a page element around a fixed point on the 2D plane.
• rotateX() Rotates a page element around the abscissa (horizontal axis).
• rotateY() Rotates a page element around the ordinate (vertical axis).
• rotateZ() Rotates a page element around the z-axis.
• rotate3d() Rotates a page element around a fixed axis in 3D space.
• translate() Changes the elements position in the horizontal and/or vertical directions.
• translateX() Changes the position of an element horizontally on the 2D plane.
• translateY() Changes the position of an element vertically on the 2D plane.
• scale() Resizes the element.
• scaleX() Resizes the element horizontally.
• scaleY() Resizes the element vertically.
• skew() Gives a tilt effect to the element.
• skewX() Tilts the element horizontally.
• skewY() Tilts the element vertically.

Now that we know what can be done with all of the different values for transform, let’s see a bunch of examples. We can start with a simple cloud.

<div class="cloudwrapper">
    <img class="cloud" src="cloud.png">
</div>

.cloudwrapper {
    text-align: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

---

translateX()

The translateX() CSS function changes the position of an element horizontally on the 2D plane. That means we can move our cloud to the right just a bit like so.

.cloud {
    transform: translateX(150px);
}

---

scaleX()

The scaleX() CSS function resizes an element along the x-axis which is horizontal. That means we can make our cloud twice as big here horizontally.

.cloud {
    transform: scaleX(2);
}

---

scale()

The scale() function can accept more than one value. The second value in this example scales on the y-axix as well. So this cloud will scale horizontally and vertically.

.cloud {
    transform: scale(2, 2);
}

---

rotate()

We can rotate elements on the page with the rotate() CSS function. This function rotates an element around a fixed point on the 2D plane. Let’s see a few examples.

Two images are used to give a nice effect with the rotate() function. The first image has a lesser opacity to show the original position versus the transformed position.

<div class="container">
    <img src="waterfall.jpg" class="one">
    <img src="waterfall.jpg" class="two">
</div>

.container {
    position: relative;
    width: 700px;
    height: 400px;
    padding: 0px 15px 100px 15px;
}

.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 40px;
}

.one {
    opacity: .3;
}

.two {
    transform: rotate(-15deg);
}

---

transform-origin

When using the rotate() function with the transform property, we can also use transform-origin to change the position of transformed elements. In other words, we can specify the pivot location the element rotates on. The value for transform-origin can be length measurements, keywords, or percentage values. The first value given is the offset horizontally while the second is the offset vertically. If you specify only one value, then this value is used for both.

<div class="container">
    <img src="apple.jpg" class="one">
    <img src="apple.jpg" class="three">
</div>

.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}

.one {
    opacity: .3;
}

.three {
    transform: rotate(20deg);
    transform-origin: top center;
}

Notice how with the transform-origin: top center; set, the image uses that location to rotate from.

Here we can set transform-origin: right bottom; to see how that changes the effect.

<div class="container">
    <img src="autumn.jpg" class="one">
    <img src="autumn.jpg" class="four">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 150px;
}

.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}

.one {
    opacity: .3;
}

.four {
    transform: rotate(20deg);
    transform-origin: right bottom;
}

Now we get what we would expect. The image is rotating off of the bottom right area. Cool!

In addition to describing the transform-origin, you can specify with exact coordinates.

<div class="container">
    <img src="bench.jpg" class="one">
    <img src="bench.jpg" class="five">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 150px;
}

.one, .five {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}

.one {
    opacity: .2;
}

.five {
    transform: rotate(20deg);
    transform-origin: 400px 0;
}

---

translate()

The translate() CSS function changes the position of an element in the horizontal direction, and the vertical direction if you like. If you only needed to re position horizontally or vertically, then you could use translateX() or translateY().

<div class="container">
    <img src="butterfly.jpg" class="one">
    <img src="butterfly.jpg" class="two">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 100px;
}

.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.two {
    transform: translate(90px, 60px);
}

What a beautiful butterfly!

---

The translate() function can also accept negative values for interesting effects.

<div class="container">
    <img src="boards.jpg" class="one">
    <img src="boards.jpg" class="four">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 100px;
}

.one {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.four {
    transform: translate(-5%, -25%);
}

---

Here we again use the scale() function to make a neat picture in picture effect.

<div class="container">
    <img src="abstractcolors.jpg" class="one">
    <img src="abstractcolors.jpg" class="three">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 50px 100px;
}

.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.three {
    transform: scale(.75);
}

---

This use of scale() makes for a nice call out effect using an image.

<div class="container">
    <img src="brushstrokes.jpg" class="one">
    <img src="brushstrokes.jpg" class="four">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 50px 100px;
}

.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.four {
    transform: scale(1.5, .5);
}

---

Skews

The various skew values of skew(), skewX(), and skewY() are used to change the angle on both or either of the axis by a certain number of degrees. This makes for those slant style effects.

This first example of skewX() gives a tilt effect to the image.

<div class="container">
    <img src="splatter2.jpg" class="one">
    <img src="splatter2.jpg" class="three">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}

.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}

.one, .two {
    margin-top: 50px;
    margin-bottom: 50px;
}

.one {
    opacity: .3;
}

.two {
    transform: skewX(30deg);
}

---

This use of skewY() creates what almost looks like an opening book effect.

<div class="container">
    <img src="splatter2.jpg" class="one">
    <img src="splatter2.jpg" class="three">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}

.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}

.one {
    margin-top: 50px;
    margin-bottom: 50px;
    opacity: .3;
}

.three {
    transform: skewY(20deg);
}

---

In the example below, skew() takes two values to skew on two planes.

<div class="container">
    <img src="splatter3.jpg" class="one">
    <img src="splatter3.jpg" class="four">
</div>

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}

.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}

.one {
    margin-top: 50px;
    margin-bottom: 50px;
    opacity: .3;
}

.four {
    transform: skew(15deg, 20deg);
}

---

The three images below use a combination of scale() and rotate() together which creates a really nice effect.

<div id="threepics" style="height: 200px;">
    <ul>
        <li><img src="sun.jpg" id="one"></li>
        <li><img src="water.jpg" id="two"></li>
        <li><img src="houses.jpg" id="three"></li>
    </ul>
</div>

#threepics ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#threepics li {
    float: left;
    margin-right: 10px;
}

#threepics li:last-of-type {
    margin-right: 0;
}

#threepics img {
    width: 200px;
    height: 150px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
    transition: transform .3s ease-in-out;
}

#threepics li:hover img {
    box-shadow: 6px 6px 6px rgba(0, 0, 0, .3);
}

#threepics li:hover #one, li:hover #one {
    transform: scale(2) rotate(-3deg);
}

#threepics li:hover #two, li:focus #two {
    transform: scale(2) rotate(5deg);
}

#threepics li:hover #three, li:focus #three {
    transform: scale(2) rotate(-7deg);
}

Hover over each picture for a nice effect.

---

3D Transformations

There are also ways to turn your transformations into effects that give a sense of three dimensions. To do this, one must make use of the perspective property. The perspective property can be assigned to a containing element which instructs the browser to treat child elements as if they are in a three dimensional space. The value given to this property is an integer which specifies the distance from the element’s origin on the z-axis. Recall X and Y axis are horizontal, and the Z-Axis is to and from. Imagine the distance between the letters on a web page and your eyes.

This first example uses these techniques to create some images flipping like cards.

<ul>
    <li><img src="design1.jpg"></li>
    <li><img src="design2.jpg"></li>
    <li><img src="design3.jpg"></li>
</ul>

ul {
    width: 1000px;
    height: 150px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    perspective: 500;
}

li {
    float: left;
    margin-right: 10px;
    transform: rotateY(50deg);
}

li img {
    width: 200px;
    height: 150px;
}

A second example is making use of 3-D Transforms to create some images in a Star Wars like perspective. Quite interesting!

<ul>
    <li><img src="design4.jpg"></li>
    <li><img src="design5.jpg"></li>
    <li><img src="design6.jpg"></li>
</ul>

ul {
    width: 630px;
    height: 100px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    perspective: 500;
}

li {
    float: left;
    margin-right: 10px;
    transform: rotateX(50deg);
}

li img {
    width: 200px;
    height: 150px;
}

---

CSS Transitions and Transformations Summary

CSS transitions and transforms are a great way to give a nice polish to user experiences. They are fully built into the CSS language, therefore the nice effects you can achieve do not require JavaScript. Transitions specify the duration of an element changing its state smoothly over time and without them, a visual state change is abrupt and immediate. To apply transitions you can use the transition-property (required), transition-duration (required), transition-timing-function, and transition-delay properties. Transforms allow designers to move or change the appearance of an element on a 2D plane. They are typically triggered with a hover state change. The four types of transforms are Rotate, Skew, Scale and Translate. It makes sense to use transitions when using transforms in order to produce a smooth and gradual effect.