Forwarding-css (animation, transitions, transitions)

This article is only for forwarding, non-original, original http://www.cnblogs.com/zhuanggege/p/5754543.html

Please support the original

CSS3 Animation

@keyframes

Specify animation, you must define the name of the animation, the percentage of the animation duration, one or more CSS style properties

Specify the time at which the change occurs, or by the keyword "from" and "to", equivalent to 0% and 100%

Syntax: @keyframes animationname {keyframes-selector {css-styles;}}

Animation

is a shorthand property for setting six animation properties:

Animation-name

Specify the name of the @keyframes animation

Animation-duration

Specifies the seconds or milliseconds that the animation takes to complete a cycle. Default is 0

Animation-timing-function

Specifies the speed curve of the animation, which is used to make the change smoother

Linear animations are the same speed from beginning to end

Ease default. Animation starts at low speed, then accelerates, slows down before it ends

Ease-in animations start at low speed

Ease-out animations end at low speed

Ease-in-out animations start and end at low speed

Cubic-bezier (N,n,n,n) is its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1

Animation-delay

Specifies when the animation starts. Default is 0

Animation-iteration-count

Specifies the number of times the animation is played. Default is 1

Infinite specifies that animations should be played in an infinite number of times

Animation-direction

Specifies whether the animation will play backwards in the next cycle

Normal default value. The animation should play normally

Alternate alternately change the direction of execution of an animation

Reverse performing animations in the opposite direction

Alternate-reverse change the direction in which the animation is executed in the opposite direction

Animation-play-state

Specifies whether the animation is running or paused. The default is "running"

Paused specifies that animations are paused

Running specifies that the animation is playing

Animation-fill-mode

Specifies whether animations are visible before or after the animation is played

None does not change the default behavior

Forwards when the animation is complete, keep the last property value (defined in the last Keyframe)

Backwards apply the Start attribute value (defined in the first keyframe) for a period of time specified by Animation-delay before the animation is displayed

Both forward and backward fill modes are applied

<div> </div><style>    div{        width:100px;         height:100px;         background:red;         Animation:demo 5s ease infinite;        position:relative;    }    @keyframes demo{        0%   {background:red; left:0px; top:0px;}        25%  {background:yellow; left:200px; top:0px; border-radius:50%;}        50%  {background:blue; left:200px; top:200px; border-radius:0%;}        75%  {background:green; left:0px; top:200px; border-radius:50%;}        100% {background:red; left:0px; top:0px;}    } </style>

<div>    <p> Current Mainstream browser Chrome, Safari, Firefox, Opera has supported most of CSS3 features, IE10 also began to fully support CSS3 </p></div ><style>    div{        margin:0 Auto;        width:500px;        height:35px;        Overflow:hidden;        position:relative;    }    p{        width:100000px;        Position:absolute;        ANIMATION:DIVV 10s linear infinite;    }    @keyframes divv{        from{left:500px;}        To{left: -800px;}    } </style>

To achieve a web-fade effect:

<style>    body{        animation:demo 3s linear;    }    @keyframes demo{        0%{            opacity:0;            Background: #fff;        }        100%{            opacity:1;            Background: #fff;        }    } </style>

CSS3 Transition

Transition

is a shorthand property for setting four transition properties:

Transition-property

Specifies the name of the CSS property that the transition is applied to. (The transition effect will begin when the specified CSS property changes)

Transition effects typically occur when a user floats the mouse pointer over an element

None no attribute will get transition effect

All properties will have a transition effect

Property defines a list of CSS attribute names to which the transition effect is applied, with a comma-delimited list

Transition-duration

Defines the time that the transition effect takes. Default is 0

Transition-timing-function

A time curve that specifies the transition effect. The default is "ease"

Linear a transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end

Ease the transition effect (equals Cubic-bezier (0.25,0.1,0.25,1)) that starts slowly, then gets faster, and then ends at a slow speed.

Ease-in a transition effect that starts at a slow speed (equals Cubic-bezier (0.42,0,1,1))

Ease-out the transition effect at a slow end (equal to Cubic-bezier (0,0,0.58,1))

Ease-in-out set the transition effect at a slow start and end (equals Cubic-bezier (0.42,0,0.58,1))

Cubic-bezier (n,n,n,n) defines its own value in the Cubic-bezier function. The possible value is a number from 0 to 1

Transition-delay

Specifies when the transition effect begins. Default is 0

<div> example </div><style>    div{        display:inline-block;        background:red;        Color:green;        font-size:40px;        transition:background 1s linear, color 1s linear, font-size 1s linear;    }    div:hover{        Background:green;        color:red;        font-size:60px;    } </style>

Transform Functions:

Matrix (): Specifies a 2D transformation as a six value (A,B,C,D,E,F) transformation matrix, equivalent to applying a [a,b,c,d,e,f] transformation matrix directly

Translate (): Specifies the 2D translation (2D translation) of the object. The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0

Translatex (): Specifies the translation of the x-axis (horizontal direction) of the object

Translatey (): Specifies the translation of the y-axis (vertical direction) of the object

Rotate (): Specifies the 2D rotation (2D rotation) of the object, preceded by the definition of < ' transform-origin ' > property

Scale (): Specifies the object's 2D scales (2D scaling). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the value of the first parameter is taken by default

ScaleX (): Specifies the (horizontal) scaling of the x axis of the object

ScaleY (): Specifies the (vertical) scaling of the y-axis of the object

Skew (): Specifies the object skew transformation (oblique-cut twist). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0

SKEWX (): Specifies the (horizontal) distortion of the x axis of the object

Skewy (): Specifies the (vertical) distortion of the y-axis of the object

Transform:translate (100px,200px) rotate (45deg) scale (2);

Transform:rotate (45deg) scale (2) translate (100px,200px);

The first one moves, then rotates, and the last zoom. The second one rotates, then scales, and finally moves.

The parameters of the two code are the same, but the methods of deformation are different, and the result will be different.

Transform-origin specify a datum point for the transformation

The position of the datum point in the horizontal direction of the element can be specified as a value of: left,center,right

The position of the datum point in the vertical direction of the element can be specified as a value of: Top,center,bottom

<div class= "Demo" > </div><style>    demo{            width:100px;            height:100px;            margin:100px Auto;            border-radius:50px;            background:red;            Transform-origin:center;            Transform:rotate (45deg) translate (0%,0%);            Transition:all 1s;    }    . demo:hover{            Background:blue;            Transform:rotate (450000deg) translate (5%,5%);    } </style>

3D Transform Functions:

Matrix3D (): Specify a 3D transform in the form of a 4x4 matrix

Translate3d (): Specifies the 3D displacement of the object. The 1th parameter corresponds to the x-axis, the 2nd parameter corresponds to the y-axis, the 3rd parameter corresponds to the z-axis, and the parameter does not allow omitting

Translatez (): Specifies the translation of the z-axis of the object

Rotate3d (): Specifies the 3D rotation angle of the object, where the first 3 parameters represent the direction of rotation x, Y, Z, and the 4th parameter represents the angle of rotation, and the parameter does not allow omitting

Rotatex (): Specifies the angle of rotation of the object on the x-axis

Rotatey (): Specifies the angle of rotation of the object on the y-axis

Rotatez (): Specifies the angle of rotation of the object on the z axis

Scale3d (): Specifies the 3D scale of the object. The 1th parameter corresponds to the x-axis, the 2nd parameter corresponds to the y-axis, the 3rd parameter corresponds to the z-axis, and the parameter does not allow omitting

Scalez (): Specifies the object's z-axis scaling

Perspective (): Specify Perspective distance

Forwarding-css (animation, transitions, transitions)