Author: bethsoderberg

The standard linguistic definition of a transition is a “movement, passage, or change from one position, state, stage, subject, concept, etc., to another.” Within CSS, transitions do exactly what you’d expect: they allow for elements to change from one state to another over time.

My favorite short explanation of what the CSS transition property does is from Chris Coyier of CSS Tricks:

The transition property is a shorthand property used to represent up to four transition-related longhand properties [that] allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.

The four properties governed by CSS transitions are:

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

Syntax

The syntax for CSS transitions allows for all possible transitions to be bundled into one line of code and also allows for the granular specification of each property on its own. Each transition property will accept one of an available set of values whether you are using the shorthand or longhand CSS structure.

Shorthand

transition: <property> <duration> <timing-function> <delay>;

Longhand

transition-property: <property>;
transition-duration: <duration>;
transition-timing-function: <timing-function>;
transition-delay: <delay>;

Transition Property

The aptly named transition-property property specifies which property or properties will be impacted by the transition. The default value for this property is all.

Syntax

transition-property: value;

Accepted transition-property values are:

• all
• none
• single property name
• multiple property names, separated by commas

Example: Stage 1

This example includes just the transition-property value. For all examples, hover over the smiley box in order to see the active state.

.box {
	transition-property: color, background-color, width;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Transition Duration Property

The transition-duration property specifies the amount of time the transition will take. The default value for this property is zero seconds..

Syntax

transition-duration: value;

Accepted transition-duration values are:

• time in seconds (s) or milliseconds (ms)
• multiple time values, separated by commas
• initial
• inherit

Example: Stage 2

In this example, we’ve added a transition-duration of two seconds in addition to specifying the transition-property value. The transition between the initial state and the active state is now smoother upon hover due to the presence of the transition-duration function.

.box {
	transition-property: color, background-color, width;
        transition-duration: 2s;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Transition Timing Property

The transition-timing-function specifies the pace at which the transition will run. The default value for this property is ease.

Syntax

transition-timing-function: value;

Accepted transition-timing-function values are:

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• custom cubic Bézier curve value
• custom stepping function value

The transition timing function’s possible values are an immensely complex topic. To learn more about them, you should read this amazing article.

Example: Stage 3

In this example, we’ve added the transition-timing-function ease-in-out in addition to specifying values for transition-property and transition-duration. The transition between the initial state and the active state now changes pace midway through due to the presence of the transition-timing-function property value.

.box {
	transition-property: color, background-color, width;
        transition-duration: 2s;
        transition-timing-function: ease-in-out;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Transition Delay Property

The transition-delay property specifies when the transition will start relative to the instant the property value changes. The default value for this property is zero seconds.

Syntax

transition-delay: value;

Accepted transition-delay values are:

• time in seconds (s) or milliseconds (ms)
• multiple time values, separated by commas
• initial
• inherit

Example: Stage 4

In this example, we’ve added the a transition-delay of three seconds in addition to specifying values for transition-property, transition-duration, and transition-timing-function properties. Now, when you hover over the box, the transition between the initial state and the active state takes three seconds to start due to the presence of the transition-delay property value.

.box {
	transition-property: color, background-color, width;
        transition-duration: 2s;
        transition-timing-function: ease-in-out;
        transition-delay: 3s;
    	color: #ffffff;
    	background-color: #ca0164;
    	width: 3em;
        height: 3em;
        text-align: center;
} 

.box:hover {
	color: #384042;
	background-color: #F5B54B;
	width: 3.6em;
}

Browser Support

CSS transitions are supported in all major browsers including Internet Explorer 10 and above. The lack of support for Internet Explorer 9 and below may be a minor roadblock towards implementing transitions in your projects, so make sure you employ CSS transitions with an eye towards graceful degradation. There is one remaining browser prefix required for full cross-browser support (listed below).

Prefix Requirements

• -webkit-

The CSS transform origin property defines the point from which a CSS transform is applied to an element.

Transform Origin Syntax

The syntax for identifying the value of the transform-origin property takes into account the x-offset and y-offset of the point of origin. The x-offset is a length or percentage from the left edge of the element. Correspondingly, the y-offset is a length or percentage from the top edge of the element.

transform-origin: x-offset y-offset;

The default value for the transform-origin property is the center of an element (50% 50%).

Any unit that can be used to define the length of an element (px, em, rem, percentage) can be used to identify the x-offset and y-offset values of the transform-origin property. Additionally, there are several keywords that are acceptable for use with the transform-origin property:

• left (0%)
• center (50%)
• right (100%)
• top (0%)
• bottom (100%)

Examples

For context, the examples included here show a faded version of the box in it’s original position, prior to the transform, behind each transformed element.

Rotate

Rotate 25 Degrees to the Left with Transform Origin at Top Right

.box { 
      transform: rotate(-25deg); 
      transform-origin: 100% 0%;
} 

Rotate 25 Degrees to the Left with Transform Origin at Bottom Right

.box { 
      transform: rotate(-25deg); 
      transform-origin: right bottom;
} 

Scale

Scale to 50% with Transform Origin at Top Right

.box { 
      transform: scale(0.5); 
      transform-origin: 100% 0%;
} 

Scale to 50% with Transform Origin at Bottom Right

.box { 
      transform: scale(0.5); 
      transform-origin: right bottom;
} 

Skew

Skew 25 Degrees to the Left with Transform Origin at Top Right

.box { 
      transform: skewX(25deg); 
      transform-origin: 100% 0%;
} 

Skew 25 Degrees to the Left with Transform Origin at Bottom Right

.box { 
      transform: skewX(25deg); 
      transform-origin: right bottom;
} 

Translate

You’ll notice that when the transform-origin property is applied to a translate transform function that there is no apparent visual difference in the outcome. This is because the element impacted by the transform is moved without changing it’s shape, size, or rotation.

Translate 1em to the Bottom Right with Transform Origin at Top Right

.box { 
      transform: translate(1em, 1em); 
      transform-origin: 100% 0%;
} 

Translate 1em to the Bottom Right with Transform Origin at Bottom Right

.box { 
      transform: translate(1em, 1em); 
      transform-origin: right bottom;
} 

Browser Support

CSS transform-origin is supported in all major browsers including Internet Explorer 9 and above. There are a handful of browser prefixes that are required for full cross-browser support (listed below).

It’s also important to note that though 3d transforms are not yet fully supported, they can be use in quite a few browsers now. With 3d transforms, a third value is accepted through the transform-origin property that represents the z axis.

Prefix Requirements

• -ms-
• -webkit-

Linguistically speaking, a transform is a “change in form, appearance, or structure,” at least according to the folks over at Dictionary.com. When it comes to CSS, the Mozilla Developer Network describes a transform this way:

“The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.”

What exactly does this definition mean? In a nutshell, CSS transforms change an element so that it’s form and visual appearance is modified. There are four basic types of CSS transforms that modify an element in different ways: rotate, scale, skew, and translate. Matrix, another type of CSS transform, is an advanced type of transform that is beyond the scope of this post.

Transforms: Syntax

The syntax for applying a CSS transform to an element is the same regardless of the specific transform function you want to use. The transform property allows for multiple transform functions to be included in one line of code. The default value of the transform property is none.

No Transforms

transform: none;

One Transform

transform: <transform-function>;

Multiple Transforms

transform: <transform-function> <transform-function> <transform-function>;

Rotate

The rotate transform function behaves exactly as you expect it will and allows you to rotate an element clockwise from its current position. Counter clockwise rotations can be achieved by using negative values.

Syntax

The specific syntax for a rotation is as follows. Angles are expressed in the format (5deg) or (-5deg), for example.

transform: rotate(angle);

Example

All examples in this post will use the following HTML and CSS to demonstrate the original state of the element before the transformation function has been applied. Any additional sample code will only account for the transform itself.

<div class="box"><i class="fa fa-smile-o"></i>
</div>

.box {
    width: 3em;
    height: 3em;
    background: #ca0164;
    color: #ffffff;
    text-align: center;
}

.box .fa {
    font-size: 2em;
    line-height: 1.45em;
}

Example: Rotate 25 Degrees to the Right

.box {
	transform: rotate(25deg);
}

Scale

The scale transform function does exactly what you’d think it might do and scales an element relative to its original size. The values specified within scale transforms are unitless and should be thought of as a multiplier.

Syntax

There are three different variations on the syntax for the scale transform function since an element can be scaled on the X axis, the Y axis, or on both axes.

X and Y axis Scale

In this format, if only valueX is specified, valueY is assumed to be equal to valueX and the element is therefore scaled proportionately.

transform: scale(valueX, valueY);

Just X axis Scale

transform: scaleX(valueX);

Just Y axis Scale

transform: scaleY(valueY);

Example: Shrink to half size

.box {
	transform: scale(0.5);
}

Skew

The skew transform function shifts  an element along the X and/or Y axis by an angle value.

Syntax

An element can be skewed along the X axis, Y axis, or along both axes, but there are only two valid syntax structures for this type of transform. You’d expect that there would be a compound format similar to that for the scale transform function to address the transform of the X and Y axes in the same function, but that particular structure is no longer in the CSS specification and should not be used.

Just X axis Skew

transform: skewX(angleX);

Just Y axis Skew

transform: skewY(angleY);

Example: Skew left

.box {
	transform: skewX(25deg);
}

Translate

The translate function moves an element vertically and/or horizontally relative to its current position. Positive values will move the element right on the X axis or down on the Y axis. Conversely, negative values will move the element left on the X axis or up on the Y axis. Any generally accepted length value can be used (pixels, ems, etc.).

You might be wondering: Why would you use translate when you can use more established CSS standards for layout and formatting? In general, you should never use the translate function for basic layout needs. Instead, think of translate as a more efficient way to move an element’s placement in a transition or animation.

Syntax

The syntax for the translate transform is nearly identical to the syntax for the scale transform function and accounts for the ability to translate an element along the X axis, Y axis, or both axes.

X and Y axis translation

transform: translate(valueX, valueY);

Just X axis translation

transform: translateX(valueX);

Just Y axis translation

transform: translateY(valueY);

Example: Move Box to Bottom Right

.box {
	transform: translate(3em, 3em);
}

Browser Support

CSS transforms are supported in all major browsers including Internet Explorer 9 and above. There are a handful of browser prefixes that are required for full cross-browser support (listed below).

It’s also important to note that 3d transforms are coming and can be used in a lot of browsers now, but they are only partially supported in IE10 and 11. Once Internet Explorer has more widespread support for 3d transforms, the universe of what is truly possible with CSS transforms will expand even further.

Prefix Requirements

• -ms-
• -webkit-

Though the classic bulleted list is perfectly utilitarian in many circumstances, sometimes we need to present bullets that are a little more graphically variant than the list styles disc, circle, and square. In this tutorial, I’ll walk you through styling bulleted lists using an icon font and CSS to create custom bullets.

Step 1: Install an icon font

We’re going to use Font Awesome as our icon font for this tutorial because it is freely available and has an awesome number of icons available (pun intended). Follow the instructions on their handy getting started page to install the Font Awesome icon font on your site.

You can use whatever font icon set you want to accomplish a similar effect, so Google away if you’d like to find some alternatives. I am also a huge fan of making custom icon fonts using Icomoon.

Step 2: Make a List

To ensure that the styling for our fancy list does not interfere with the styling of any other lists that appear on the page, I’m going to give our list a class of “fancy-list.”

The Code


<ul class="fancy-list">
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>


Output

• list item one
• list item two
• list item three

Step 3: Remove the Standard Bullets

Now we need to remove the default bullet styling. We’ll do this by setting the list-style to “none” in our CSS. Additionally, I am adding some basic text formatting to govern the font and font size of the list text.

The Code


ul.fancy-list {
font-family: arial, sans-serif;
font-size: 16px;
line-height: 20px;
list-style: none;
}


Output

• list item one
• list item two
• list item three

Step 4: Add the Icon Bullets

We are going to use the CSS pseudo-class :before and the content selector to place a star icon () before each list item.

To do this, we need to call the unicode key for the icon you want to use through the content selector. You’ll need to place a backslash (not a forward slash) before the unicode key in order for the character to render properly in the browser. In our example, the unicode key for the star character in the Font Awesome family is f005. You can find the unicode information for each Font Awesome icon on this cheat sheet or on the page for each individual icon.

In order for our icon to actually appear, we also need to define the icon font to be the font family for the pseudo class content. In this case, the font name is FontAwesome. I am also defining a color to make our stars orange.

The Code


ul.fancy-list li:before {
font-family: FontAwesome;
content: "f005";
color: #F5B54B;
}


Output

• list item one
• list item two
• list item three

Step 5: Adjust Icon Size

Things are starting to look pretty good, except for the fact that our star is out of proportion to the text in our list. We’ll adjust the size of the icon by using font-size, just like we would to style the size of any other font.

The Code


ul.fancy-list li:before {
font-family: FontAwesome;
font-size: 9px;
content: "f005";
color: #F5B54B;
}


Output

• list item one
• list item two
• list item three

Step 6: Adjust Spacing

We’re almost there! Now we just need to adjust the spacing so that there is some space between the star and the text and so that the star is vertically centered to align with each line of text.

Adding margin-right: 5px; adds the space we need between the star and the text.

Addressing the vertical centering of the star is a bit more tricky. You might think that adding padding-bottom or margin-bottom would work, but this actually adjusts the vertical placement of each list item AND the star. In order to control the placement of the star independently, we need to set position: relative;. Then, we can set the bottom property to whatever value places our stars in the right place.

The Code


ul.fancy-list li:before {
font-family: FontAwesome;
font-size: 9px;
content: "f005";
color: #F5B54B;
position: relative;
margin-right: 5px;
bottom: 2px;
}


Output

• list item one
• list item two
• list item three

Conclusion

Pulling in font icons through CSS is one way I’ve discovered to create consistent and graphically variant styling of bulleted lists. This technique is flexible across pretty much any icon font, including those you create yourself. Best of all, this technique is supported in modern browsers (though you may come across some issues with IE8).