CSS3 Transitions

Menu

CSS3 Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

Example: Mouse over the element below to see a CSS3 transition effect

CSS3
Transition

Browser Support for Transitions

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
transition 10.0 26.0
4.0 -webkit-		 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-delay 10.0 26.0
4.0 -webkit-		 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-duration 10.0 26.0
4.0 -webkit-		 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-property 10.0 26.0
4.0 -webkit-		 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-timing-function 10.0 26.0
4.0 -webkit-		 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-

How to Use CSS3 Transitions?

To create a transition effect, you must specify two things:

NOTE: All of the following examples are either division or global elements intended to be used in style sheets or in style blocks. Be sure to use the proper element blocks and HTML in order for the example to display properly in the "Try-It Editor"

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

Example

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the <div> element:

Example

div:hover {
    width: 300px;
}
Try it yourself »

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

Example

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}
Try it yourself »

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

The following example shows the some of the different speed curves that can be used:

Example

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Try it yourself »

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

The following example has a 1 second delay before starting:

Example

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
Try it yourself »

Transition + Transformation

The following example also adds a transformation to the transition effect:

Example

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
Try it yourself »

More Transition Examples

The CSS3 transition properties can be specified one by one, like this:

Example

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
Try it yourself »

or by using the shorthand property transition:

Example

div {
    transition: width 2s linear 1s;
}
Try it yourself »

CSS3 Transition Properties

The following table lists all the transition properties:

Property Description
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect

 







CSS3 Animations

Menu

CSS3 Animations

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

CSS3
Animation

Browser Support for Animations

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
@keyframes 10.0 43.0
4.0 -webkit-		 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-
animation 10.0 43.0
4.0 -webkit-		 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

What are CSS3 Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS3 animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframesrule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will lasts for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

Example

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Try it yourself »

Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0. 

In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Try it yourself »

The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Try it yourself »

Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Example

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
Try it yourself »

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:

Example

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
Try it yourself »

The following example uses the value "infinite" to make the animation continue for ever:

Example

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
Try it yourself »

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property is used to let an animation run in reverse direction or alternate cycles.

The following example will run the animation in reverse direction:

Example

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
Try it yourself »

The following example uses the value "alternate" to make the animation first run forward, then backward, then forward:

Example

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}
Try it yourself »

Specify the Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

The following example shows the some of the different speed curves that can be used:

Example

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Try it yourself »

Animation Shorthand Property

The example below uses six of the animation properties:

Example

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
Try it yourself »

The same animation effect as above can be achieved by using the shorthand animation property:

Example

div {
    animation: example 5s linear 2s infinite alternate;
}
Try it yourself »

CSS3 Animation Properties

The following table lists the @keyframes rule and all the animation properties:

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties (except animation-play-state and animation-fill-mode)
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should play in reverse direction or alternate cycles
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

 







CSS3 Multiple Columns

Menu

CSS3 Multi-column Layout

The CSS3 multi-column layout allows easy definition of multiple columns of text just like in newspapers:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-count 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1

CSS3 Multi-column Properties

In this chapter you will learn about the following multi-column properties:

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into.

The following example will divide the text in the <div> element into 3 columns: 

Example

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
Try it yourself »

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns.

The following example specifies a 40 pixels gap between the columns:

Example

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
Try it yourself »

CSS3 Column Rules

The column-rule-style property specifies the style of the rule between columns:

Example

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
Try it yourself »

The column-rule-width property specifies the width of the rule between columns:

Example

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
Try it yourself »

The column-rule-color property specifies the color of the rule between columns:

Example

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
Try it yourself »

The column-rule property is a shorthand property for setting all the column-rule-* properties above.

The following example sets the width, style, and color of the rule between columns:

Example

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
Try it yourself »

Specify How Many Columns an Element Should Span

The column-span property specifies how many columns an element should span across.

The following example specifies that the <h2> element should span across all columns:

Example

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
Try it yourself »

Specify The Column Width

The column-width property specifies a suggested, optimal width for the columns.

The following example specifies that the suggested, optimal width for the columns should be 100px:

Example

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}
Try it yourself »

CSS3 Multi-columns Properties

The following table lists all the multi-columns properties: 

Property Description
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies a suggested, optimal width for the columns
columns A shorthand property for setting column-width and column-count

 







CSS3 User Interface

Menu

CSS3 User Interface

CSS3 has new user interface features such as resizing elements, outlines, and box sizing.

In this chapter you will learn about the following user interface properties:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
resize Not Supported 4.0 5.0
4.0 -moz-		 4.0 15.0
outline-offset Not Supported 4.0 5.0
4.0 -moz-		 4.0 9.5

CSS3 Resizing

The resize property specifies whether or not an element should be resizable by the user.

This div element is resizable by the user (works in Chrome, Firefox, Safari and Opera).

The following example lets the user resize only the width of a <div> element:

Example

div {
    resize: horizontal;
    overflow: auto;
}
Try it yourself »

The following example lets the user resize only the height of a <div> element:

Example

div {
    resize: vertical;
    overflow: auto;
}
Try it yourself »

The following example lets the user resize both the height and the width of a <div> element:

Example

div {
    resize: both;
    overflow: auto;
}
Try it yourself »

CSS3 Outline Offset

The outline-offset property adds space between an outline and the edge or border of an element.

Outlines differ from borders in two ways:

This div has an outline 15px outside the border edge.

The following example uses the outline-offset property to add a 15px space between the border and the outline:

Example

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}
Try it yourself »

CSS3 User Interface Properties

The following table lists all the user interface properties:

Property Description
box-sizing Allows you to include the padding and border in an element's total width and height
nav-down Specifies where to navigate when using the arrow-down navigation key
nav-index Specifies the tabbing order for an element
nav-left Specifies where to navigate when using the arrow-left navigation key
nav-right Specifies where to navigate when using the arrow-right navigation key
nav-up Specifies where to navigate when using the arrow-up navigation key
outline-offset Adds space between an outline and the edge or border of an element
resize Specifies whether or not an element is resizable by the user

 







CSS3 Box Sizing

Menu

CSS3 Box Sizing

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
box-sizing 8.0 10.0
4.0 -webkit-		 29.0
2.0 -moz-		 5.1
3.1 -webkit-		 9.5

Without the CSS3 box-sizing Property

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height).

The following illustration shows two <div> elements with the same specified width and height:

This div is smaller (width is 300px and height is 100px).

This div is bigger (width is also 300px and height is 100px).

The two <div> elements above end up with different sizes in the result (because div2 has a padding specified):

Example

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}
Try it yourself »

So, for a long time web developers have specified a smaller width value than they wanted, because they had to subtract out the padding and borders.

With CSS3, the box-sizing property solves this problem.

With the CSS3 box-sizing Property

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.

If you set box-sizing: border-box; on an element padding and border are included in the width and height:

Both divs are the same size now!

Hooray!

Here is the same example as above, with box-sizing: border-box; added to both <div> elements:

Example

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
Try it yourself »

Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.

The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and textareas look different at width: 100%;).

Applying this to all elements is safe and wise:

Example

* {
    box-sizing: border-box;
}
Try it yourself »

Menu