CSS3 笔记四（Transforms/Transition/Animations）

CSS3 2D Transforms Methods

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

1> translate()

• The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

2> rotate()

• The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

Example

 div {
     -ms-transform: rotate(20deg); /* IE 9 */
     -webkit-transform: rotate(20deg); /* Safari */
     transform: rotate(20deg);
 } 

3> scale()

• The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

4> skewX（沿X轴形变）

• The skewX() method skews an element along the X-axis by the given angle.

5> skewY（沿Y轴形变）

• The skewY() method skews an element along the Y-axis by the given angle.

6> skew（沿X和Y轴形变）

• The skew() method skews an element along the X and Y-axis by the given angles.

7> matrix()

• The matrix() method combines all the 2D transform methods into one.

Example

 div {
     -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
     -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
     transform: matrix(1, -0.3, 0, 1, 0, 0);
 } 

CSS3 3D Transforms

• rotateX()
• rotateY()
• rotateZ()

1> rotateX()

• The rotateX() method rotates an element around its X-axis at a given degree.

2> rotateY()

• The rotateY() method rotates an element around its Y-axis at a given degree.

3> rotateZ()

• The rotateZ() method rotates an element around its Z-axis at a given degree:

Example

 div {
     -webkit-transform: rotateZ(90deg); /* Safari */
     transform: rotateZ(90deg);
 } 

CSS3 Transitions

• Specify the CSS property you want to add an effect to.
• Specify the duration of the effect.

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

syntax

transition: property duration timing-function delay|initial|inherit;

Example

 input[type=text] {
     width: 100px;
     -webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
     transition: width .35s ease-in-out;
 }

 input[type=text]:focus {
     width: 250px;
 }

1> transition-property

• Specify the name of the CSS property

syntax

transition-property: none|all|property|initial|inherit;

Example

 div {
     -webkit-transition-property: width, height; /* Safari */
     transition-property: width, height;
 }

 div:hover {
     width: 300px;
     height: 300px;
 }

2> transition-duration

• Specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

syntax

transition-duration: time|initial|inherit;

Example

 div {
     -webkit-transition-duration: 5s; /* Safari */
     transition-duration: 5s;
 }

3> transition-delay

• The transition-delay property specifies when the transition effect will start.
• The transition-delay value is defined in seconds (s) or milliseconds (ms).

syntax

transition-delay: time|initial|inherit;

Example

 div {
     -webkit-transition-delay: 2s; /* Safari */
     transition-delay: 2s;
 }

4> transition-timing-function

• The transition-timing-function property specifies the speed curve of the transition effect.
• This property allows a transition effect to change speed over its duration.

syntax

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit;

Value	Description
ease	Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear	Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in	Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out	Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out	Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)	Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Example

 /* For Safari 3.1 to 6.0 */
 #div1 {-webkit-transition-timing-function: linear;}
 #div2 {-webkit-transition-timing-function: ease;}
 #div3 {-webkit-transition-timing-function: ease-in;}
 #div4 {-webkit-transition-timing-function: ease-out;}
 #div5 {-webkit-transition-timing-function: ease-in-out;}

 /* Standard syntax */
 #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;}

CSS3 Animations

1> animation

syntax

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Example

 div {
     -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
     animation: mymove 5s infinite;
 } 

2> animation-name

• The animation-name property specifies a name for the @keyframes animation.

syntax

animation-name: keyframename|none|initial|inherit;

Example

 /* The animation code */
 @keyframes mymove {
     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: mylove;
     animation-duration: 4s;
 } 

3> animation-duration

syntax

animation-duration: time|initial|inherit;

4> animation-timing-function

syntax

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit;

5> animation-delay

syntax

animation-delay: time|initial|inherit;

6> animation-iteration-count

• The animation-iteration-count property specifies the number of times an animation should be played.

syntax

animation-iteration-count: number|infinite|initial|inherit;

7> animation-direction

syntax

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

?? 8> animation-fill-mode

• The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).

syntax

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

9> animation-play-state

• The animation-play-state property specifies whether the animation is running or paused.

syntax

animation-play-state: paused|running|initial|inherit;

Example

 div {
     width: 100px;
     height: 100px;
     background: red;
     position: relative;
     -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
     animation: mymove 5s infinite;
 }

 div:hover {
     -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
     animation-play-state: paused;
 }

 /* Chrome, Safari, Opera */
 @-webkit-keyframes mymove {
     from {left: 0px;}
     to {left: 200px;}
 }

 @keyframes mymove {
     from {left: 0px;}
     to {left: 200px;}
 }
 </style>

Animation example1

 div {
     animation: example 5s linear 2s infinite alternate;
 }

Animation example2

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
     width: 100px;
     height: 100px;
     background-color: red;
     position: relative;
     animation-name: example;
     animation-duration: 5s;
     animation-timing-function: linear;
     animation-delay: 2s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
 }
 @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;}
 }
 </style>
 </head>
 <body>

 <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

 <div></div>

 </body>
 </html>