WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Transitions


CSS3 Transitions

CSS3 advances enable us to change starting with one property estimation then onto the next over a given duration.

Example: It is a CSS3 progress effect:

CSS3

Browser Support for Transitions

The numbers in the table indicate the main program form that completely bolsters the property.

Numbers pursued by - webkit-, - moz-, or - o-indicate the principal form that worked with a prefix.

Property
transition 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-delay 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-duration 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-property 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-timing-function 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-

How to Use CSS3 Transitions?

To make a change impact, you should determine two things:

  • the CSS property you need to include an impact to
  • the span of the effect

The following precedent demonstrates a 100px * 100px red <div> component. The <div> component has additionally determined a progress impact for the width property, with a length of 3 seconds:

Example

div {
    width: 100px;
    tallness: 100px;
    foundation: red;
    - webkit-change: width 3s;/* Safari */
    change: width 3s;
}

The progress impact will begin when the predefined CSS property (width) changes value.

Now, let us determine another incentive for the width property when a client mouses over the <div> element:

Example

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

Change Several Property Values

The following precedent includes a change impact for both the width and tallness property, with a length of 3 seconds for the width and 4 seconds for the height:

Example

div {
    - webkit-progress: width 3s, tallness 4s;/* Safari */
    progress: width 3s, tallness 4s;
}
Try it yourself »

Specify timing of the Transition

The transition-timing-function property indicates the speed bend of the change effect.

The progress timing-work property can have the accompanying values:

  • ease - indicates a progress impact with a moderate begin, at that point quick, at that point end gradually (this is default)
  • linear - indicates a progress impact with a similar speed from begin to end
  • ease-in - indicates a progress impact with a moderate start
  • ease-out - indicates a progress impact with a moderate end
  • ease-in-out - indicates a progress impact with a moderate begin and end
  • cubic-bezier(n,n,n,n) - gives you a chance to characterize your very own qualities in a cubic-bezier function

The following precedent demonstrates the a portion of the diverse speed bends that can be used:

Example

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

Delay the Transition Effect

The transition-delay property determines a deferral (like a flash) for the progress effect.

The following model has a 1 second postponement before starting:

Example

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

Transition + Transformation

The following model likewise adds a change to the progress effect:

Example

div {
    - webkit-change: width 3s, stature 3s, - webkit-change 3s;/* Safari */
    progress: width 3s, tallness 3s, change 3s;
}
Try it yourself »

More Transition Examples

The CSS3 change properties can be indicated one by one, as this:

Example

div {
    change property: width;
    change term: 3s;
    change timing-work: linear;
    progress delay: 1s;
}

Example

div {
    progress: width 3s direct 1s;
}
Try it yourself »