CSS Animations-page effects

2D, 3D conversion

With CSS3 conversion, we are able to move, scale, rotate, lengthen, and stretch elements.

Conversion method

Translate () mobile

Transform:translate (100px,100px)

-webkit-transform:translate (100px,100px)//safari Chrome

-ms-transform:translate (100px,100px)//ie

-o-transform:translate (200px,100px)//opera

-moz-transform:translate (200px,100px)//firefox

Rotate () rotation

Transform:rotate (200DEG)

-webkit-transform:rotate (200deg)//safari Chrome

-ms-transform:rotate (200deg)//ie

-o-transform:rotate (200deg)//opera

-moz-transform:rotate (200deg)//firefox

Scale () Scaling

Transform:scale (ON)

-webkit-transform:scale (//safari Chrome)

-ms-transform:scale (//ie)

-o-transform:scale (//opera)

-moz-transform:scale (//firefox)

Skew () tilt

Transform:skew (50deg,50deg)//z axis tilt 50 degrees, y-axis tilt 50 degrees

-webkit-transform:skew (50deg,50deg)//safari Chrome

-ms-transform:skew (50deg,50deg)//ie

-o-transform:skew (50deg,50deg)//opera

-moz-transform:skew (50deg,50deg)//firefox

Matrix ()

3D Conversion method

Rotatex ()

Transform:rotatex (120DEG)

-webkit-transform:rotatex (120deg)//safari Chrome

-ms-transform:rotatex (120deg)//ie

-o-transform:rotatex (120deg)//opera

-moz-transform:rotatex (120deg)//firefox

Rotatey ()

Transition

Elements are converted from one style to another

CSS for animated effects

Time the animation was executed

Property

Transition setting four Transition properties

Transition:width 2s,height 2s,transform 2s;

-webkit-transition:width 2s,height 2s,-webkit-transform 2s; Safari Chrome

-ms-transition:width 2s,height 2s,-ms-transform 2s//ie

-o-transition:width 2s,height 2s,-o-transform 2s//opera

-moz-transition:width 2s,height 2s,-moz-transform 2s//firefox

Transition-property the name of the transition

Transition-duration time spent on transition effects

Transition-timing-function time curve of transition effect

Transition-delay transition effect Start time-time of delay start

Animation

With CSS3, you can also create animations

Animations need to follow @keyframes rules

Specify the duration of the animation

Specify the name of the animation

div{

Animation:anim 5s Infinite Alternate;

-webkit-animation:anim 5s;

}

@keyframes anim{

0%{background:red;left:0px;top:0px}

25%{background:blue;left:200px;top:0px}

50%{background: #ccffcc; left:200px;top:200px}

75%{background: #00fffff; left:0px;top:200px}

100%{background:red;left:0px;top:0px}

}

@-web-keyframes anim{

0%{background:red;left:0px;top:0px}

25%{background:blue;left:200px;top:0px}

50%{background: #ccffcc; left:200px;top:200px}

75%{background: #00fffff; left:0px;top:200px}

100%{background:red;left:0px;top:0px}

}

Multiple columns

In CSS3, you can create sort to lay out text or areas

Property

Column-count

Column-gap

Column-rule

div{

Column-count:3;

-webkit-column-count:3;

-webkit-column-gap:50px;

-moz-column-gap:50px;

column-gap:50px;

column-rule:5px outset #FF0000;

-webkit-column-rule:5px outset #FF0000;

}

Waterfall Flow

. container{

column-width:250px;

-webkit-column-width:250px;

-webkit-column-gap:5px;

column-gap:5px;

}

CSS Animations-page effects