join: new@juude

get alerts for new articles

CLOSE WINDOW

CSS3 - 2DTransform & Transitions w3c

Transitions

A transition controls the speed and the smoothness of the animation. You can use transitions alone or in conjunction with transforms.

Transitions used alone (which is the case for this example) will not work on some touch devices: tablets and phones etc. The other examples on the following pages include transform.

BUTTON

code on page:
<div id="button">BUTTON</div>

Place the changed color on the hover:

#button:hover{
transition-property: all; also vender code
transition-timing-function: ease; also vender code
transition-duration: 2s; also vender code
background-color: #fa4173;
border-color: #94979f;
color: #ccc;
}

The CSS for the button in its original state needs to include:

transition: all ;

Inorder for it to have animation when the user rolls off the button. without it there would not be any animation it would just abruptly change from one color to the other.

#button{
position: relative;
width: 120px;
height: 80px;
background-color: #94979f;

padding: 40px;
border-width: 10px;
border-color: #fa4173;
border-style: solid;
color: #fff;
text-align: center;
transition-property: all; also vender-code
transition-timing-function: ease; also vender-code
transition-duration: 2s; also vendor-code

}

The CSS for the hover which includes the vender-code

#button:hover{
-moz-transition-property: all;
-moz-transition-timing-function: ease;
-moz-transition-duration: 2s;

-webkit-transition-property:all;
-webkit-transition-timing-function: ease;
-webkit-transition-duration: 2s;

-ms-transition-property: all;
-ms-transition-timing-function: ease;
-moz-transition-duration: 2s;
-o-transition-property: all;
-o-transition-timing-function: ease;
-o-transform-duration: 2s;
transition-property: all;
transition-timing-function: ease;
transition-duration: 2s;
background-color: #fa4173;
border-color: #94979f;
color: #ccc;

}

Transitions - Code

There are four transitions:
transition-timing-function: speed smoothness etc
transition-duration: time
transition-property: named properties, or "all"
transition-delay: time in seconds

transition-timing-function

The smoothness of the animation

steps stop and/or start abruptly
linear : Same speed from start to end
ease: Starts slow, then fast and ends slowly
ease-in: Slow start
ease-out: Slow end
ease-in-out: slow start and end
cubic-bezier (n, n, n, n,): Define your own values
step: obvious steps in the animation - changes are abrupt
steps-start: step(2, start)
steps-end: step(2, end)

transition-duration

The duration controls the length of time it takes for the transaction which in turn controls the speed. the time is expressed in seconds or faction of seconds:

transition-duration: 1s ;
transition-duration: .5s ;

transition-properties

You can either state the name of the properties or put all if you want all the changed properties to have a transition

transition-property: background- color;

transition-properties

state the time in seconds for how long you want to delay the transition.

transition-delay: .2s;