css010 CSS for transform transition and animation

css010 CSS of the Transform Transition and the Animation

Look at no one can think of what they are doing.

1. Transform

Transform(variant)

Rotate ( swivel )

Transform:rotate (10DEG); Rotate clockwise 10 degrees (units of measure of deg angle)

Scale ( zoom )

Transform:scale (2); Scale (zoom) resize element (2 for multiples)

Transform:scale (2,5); The width becomes twice times the height becomes 5 times times

Transform:scalex (2); The width becomes twice times the height unchanged

Scale is a scale element that can be flipped when the value behind it is negative

Transform:scalex (-1); Turn from left to right.

Transform:scalex ( -1,1); Flips along the y-axis.

Transform:scalex (1,-1); Flips along the x-axis.

Translate ( element implementation moves in one Direction )

Translate:x y; (When the X value is negative-move to the left.) Y is negative-move up)

Skew (Tilt)

Transform:skew (45deg 0); Tilt along the x-axis

Transform:skew (0 45deg); Tilt along the y axis

multiple Transform function Sharing

Transform:rotate (45DEG) scale (2);

origin ( origin, origin ) generally defaults to Element center point

transform-origin:left top;

2. transition (Transition change transformation)

First, in order to make the transition effective, the following things need to be done:

1, two styles: one style represents the original appearance of the element, and the other style represents the final appearance

2. Transition properties:

3. Trigger

Second, how to add transition

The core of CSS's transition is to use four properties to control which properties to move warriors, how long the animation takes, what type of animation to use, and whether to delay before the animation starts.

transition you need to add a vendor prefix to work properly in your browser. (p389 p390)

The following example turns the background color to blue when the mouse passes through, and the change lasts for one second.

1,. navbutton{

Background-color:orange;

Transition-property:background-color;

Transition-duration:1s;

}

. navbutton:hover{

Background-color:blue

}

What are the three or four attributes, respectively??

1, Transition-property, defines what attributes to animate warriors

Keywords: all, (color, Background-color, Boder-color)

2, Transition-duration defines how long the animation will last (typically in seconds or milliseconds)

Transition-duration:1s;

You can also define the time limit for each property that you want to animate:

Transition-property:color, Background-color, Boder-color;

Transition-duration:1s,. 75s, 2s;

3, Transition-timing-function control the speed of animation: can be the following four values:

Linera, Ease (default), Ease-in, Ease-out, Ease-in-out

Transition-timing-function:cubic-bezier (. 20,. 96,. 74,. 07)

4, Transition-delay delay start transition

Transition:2s;

Iv. Shortcuts to transition

The transition attribute can be expressed transition-property transition-duration transition-timing-function transition-delay all at once. is called his quick properties

Transition:all 1s ease-in 5s;

Transition:background-color 1s; wait.

3. Animation ( create animation )

First, the two steps to create an animation:

1. Defining animations (including creating keyframes)

2. Apply animations to elements

Second, how to define KeyFrames

Define the basic structure of keyframes:

@keyframes animationname{

from{/* list CSS Properties here*/}

to{/* list CSS Properties here*/}

}

From start frame. To end Frame

@keyframes fadein{

from{opacity:0;}

To{opacity:1;}

}

@keyframes fadein{

from{background-color:red;}

50%{Background-color:blue;}

to{Background-color:orange;}

}

Can use 0% alternative from, 100% instead of to;

Third, how to apply animation

1, can be applied to pseudo-class animation, including: Hover:active:target:focus

2. Create a fade-in animation with @keyframes rules:

@keyframes fadein{from{opacity:0;}  to{opacity:1;} } (animating a single property)

(Create animations for multiple properties)

@keyframes fadein{

from{

opacity:0;

color:red;

width:50%;

}

to{

Opacity:1;

Color:blue;

width:100%;

}

}

3. Apply animations to <div> label styles

. announcement{

Animation-name:fadein;

Animation-duration:1s;

}

Animation-name tell the browser which animation to use

Animation-duration tells the browser how long the animation lasts

Iv. How to give animation timing

Five, how to complete the animation

Transition is an animation that can only be run once

Animation animations that can run multiple times

Animation-iteration-count:10; (Run the animation 10 times)

Animation-direction control the direction of animation run: The value can be: alternate

Vi. Animation shortcuts

. fade{

Animation-name:fadeout;

Animation-duration:2s;

Animation-timing-function:ease-in-out;

Animation-iteration-count:2;

Animation-direction:alternate;

animation-delay:5s;

Animation-fill-mode:forwards;

}

Can be written in the following sentence:

. fade{animation:fadeout 2s ease-in-out 2 alternate 5s forwards}

(only names and times are necessary, others are optional.) )

Vii. How to suspend animation

animation-play-state:running/paused;

. fade:hover{animation-play-state:paused;}

css010 CSS for transform transition and animation