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>