Kevin Western's Blog

CSS3: Transition Timing Functions

The CSS3 Transition spec has already defined various timing, or stepping, functions for us. What do these timing functions look like, you ask? Take a look.

A list of timing functions have already been defined in the transition-timing-function spec. Since I’m a visual guy I’d prefer to see what each of these timing functions look like with an example. Each example will move the square from left to right over 5 seconds when the container is hovered over. Learn more about CSS transitions.

See the css with browser prefixes here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.square {
    width: 75px;
    height: 75px;
    background-color: black;
    position: absolute;
    left: 0;
    transition-property: left;
    transition-duration: 5s;
}
.container {
    width: 450px;
    height: 75px;
    border: solid thin black;
    margin-bottom: 30px;
    position: relative
}

.container:hover .square {
    left: 375px;
    background-color: red
}

ease

1
2
3
#ease-transition {
  transition-timing-function: ease;
}

linear

1
2
3
#linear-transition {
  transition-timing-function: linear;
}

ease-in

1
2
3
#ease-in-transition {
  transition-timing-function: ease-in;
}

ease-out

1
2
3
#ease-in-transition {
  transition-timing-function: ease-out;
}

ease-in-out

1
2
3
#ease-in-transition {
  transition-timing-function: ease-in-out;
}

step-start

1
2
3
#ease-in-transition {
  transition-timing-function: step-start;
}

step-end

(Hover for 5s)

1
2
3
#ease-in-transition {
  transition-timing-function: step-end;
}

steps

1
2
3
#ease-in-transition {
  transition-timing-function: steps(5, start);
}

Comments