CSS3 transitions and animations

A, CSS3 transitions

• transition-property

　　　CSS property name specified transition effect

   -webkit-transition-property: none / all / property;
      -moz-transition-property: none / all / property;
       -ms-transition-property: none / all / property;
        -o-transition-property: none / all / property;
           transition-property: none / all / property;

/*参数说明
- none
- all，默认值
- property(CSS属性名) 例如color、opacity...*/

 

• transition-duration

　　　How much effect the provisions of the transition period

DURATION-Transition: Time; 

/ * Parameters 
- transition effect a predetermined time it takes to complete (in seconds or milliseconds) 
- The default value is 0 * /

 

• transition-timing-function

　　　Predetermined speed velocity profile effect

Transition-Timing-function: EASE / Linear / EASE-in / EASE-OUT / EASE-in-OUT 
                            STEP-Start / STEP-End / Steps (<Integer>, [Start / End]) 
                            Cubic-Bezier (<Number> , <Number>, <Number>, <Number>); 

/ * parameters 
- linear: linear transition. Bezier curve is equivalent to (0.0, 0.0, 1.0, 1.0) 
- EASE: smooth transition. Bezier curve is equivalent to (0.25, 0.1, 0.25, 1.0) 
- EASE-in: from slow to fast. Bezier curve is equivalent to (0.42, 0, 1.0, 1.0) 
- EASE-OUT: from fast to slow. Bezier curve is equivalent to (0, 0, 0.58, 1.0) - EASE-in-OUT: from slow to fast and then slow. Bezier curve is equivalent to (0.42, 0, 0.58, 1.0) (best) 
- Start-STEP: equivalent to Steps (. 1, Start) 
- STEP-End: equivalent to Steps (. 1, End) 
- Steps (< integer> [, [start | end ]]):? step function accepts two parameters of 
                                         the first parameter: must be a positive integer, the number of steps specified function



                                         The second parameter: End or start value but, given point in time for each step change in the value of the
                                         The second parameter: Alternatively, the default value End 
- Cubic Bezier-(<Number>, <Number>, <Number>, <Number>): 
  a particular type of Bezier curve, the four values for an in [0, 1] interval * /

 

• transition-delay

　　　When to start to define the transition effect

Delay-Transition: Time; 

/ * Parameter Description 
- transitions to wait until the specified number of milliseconds or seconds 
- default value is 0 * /

 

 

• transition complex wording

transition: property duration timing-function delay;

 

• Practical application

div
{
    width:100px;
    height:75px;
    background:#0b2632;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:ease-in-out;
    transition-delay:0.5s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:0.5s;
}

div:hover
{
    width:200px;
}

 

Two, CSS3 animation

• Keyframes

　　　Keyframe, can specify any changes in order to determine the animation key positions Animation

animationname @keyframes { 
   keyframes Selector {- 
       CSS-Styles;
    } 
} 

/ * Parameters 
 animationname: item will be written, the name of the definition of animation 
 keyframes-selector: item will be written, the percentage duration of the animation, 0-100%, from (0 %), to (100%) 
 CSS-styles: will write items, one or more legitimate CSS style attributes 
 @keyframes animationname written separately in style in 
* /

 

• animation-name

　　　Provisions need to be bound to a selector keyframe name

name-Animation: keyframename / none; 

/ * Parameters 
 keyframename: Specifies the name to bind to the selector key frames; 
 none: Specifies there is no animation (movies can be used to cover the cascade) 
* /

 

• animation-duration

　　　It takes time for completion of the animation in seconds or milliseconds

DURATION-Animation: time; 

/ * Parameters 
 time Specifies the time it takes to complete the animation. The default value is 0, meaning no animation 
* /

 

• animation-timing-function

　　　Prescribed speed of the animation curve

Animation-Timing-function: EASE / Linear / EASE-in / EASE-OUT / EASE-in-OUT 
                            STEP-Start / STEP-End / Steps (<Integer>, [Start / End]) 
                            Cubic-Bezier (<Number> , <Number>, <Number>, <Number>); 

/ * parameters 
- linear: linear transition. Bezier curve is equivalent to (0.0, 0.0, 1.0, 1.0) 
- EASE: smooth transition. Bezier curve is equivalent to (0.25, 0.1, 0.25, 1.0) 
- EASE-in: from slow to fast. Bezier curve is equivalent to (0.42, 0, 1.0, 1.0) 
- EASE-OUT: from fast to slow. Bezier curve is equivalent to (0, 0, 0.58, 1.0) - EASE-in-OUT: from slow to fast and then slow. Bezier curve is equivalent to (0.42, 0, 0.58, 1.0) (best) 
- Start-STEP: equivalent to Steps (. 1, Start) 
- STEP-End: equivalent to Steps (. 1, End) 
- Steps (< integer> [, [start | end ]]):? step function accepts two parameters of 
                                         the first parameter: must be a positive integer, the number of steps specified function



                                         The second parameter: End or start value but, given point in time for each step change in the value of the
                                         The second parameter: Alternatively, the default value End 
- Cubic Bezier-(<Number>, <Number>, <Number>, <Number>): 
  a particular type of Bezier curve, the four values for an in [0, 1] interval * /

 

• animation-delay

　　　The provisions of delay before the start of the animation

Delay-Animation: Time; 

/ * Parameter 
 optional. Animation is defined before the start wait time in seconds or milliseconds. The default value is 0 
 if the value is negative, then the animation starts immediately, but will skip the appropriate time to enter the animation 
* /

 

• animation-iteration-count

　　　Specified number of times the animation should play

Iteration-COUNT-Animation: Infinite / <number>; 

/ * Parameters 
 <number> is a number whose default value is "1"; infinite number of infinite loop 
* /

 

• animation-direction

　　　Whether provisions should turn reverse play the animation

Animation-direction: Normal / Reverse / Alternate / Alternate-Reverse / Initial / the inherit; 

/ * Parameters 
 normal: normal direction 
 reverse: run opposite 
 alternate: Syngenta After the reaction, and continuously run alternately (need to rely Infinite) 
 Alternate-Reverse : the first anti-n, and continuously run alternately (need to rely Infinite) 
* /

 

• animation-fill-mode

　　　When the provisions of the animation style is completed or there is a delay when the animation does not start to play, to be applied to the element

Fill-MODE-Animation: none / Forwards / Backwards / both / Initial / the inherit; 

/ * Parameters 
 none: Default. Not set beyond the object animation state 
 forwards: Set object state to state at the end of the animation 
 backwards: Set object state to state when the movie starts 
 both: Sets the object state to state, or the beginning of the end of the animation 
* /

 

• animation-play-state

　　　Regulations or pause the animation runs

Play-State-Animation: paused / running; 

/ * Parameters 
 paused: Specifies to pause the animation 
 running: the default value, specify a running animation 
* /

 

• animation

　　　Composite wording

Animation: function-name DURATION Timing Delay Iteration-COUNT MODE direction-Fill-Play State; 

/ * Parameter Description 
 Default EDITORIAL time DURATION 
* /

 

• will-change

　　　Enhanced page rendering performance, tells the browser what to do in advance elements of animation, let the browser in advance to prepare the appropriate optimization settings

Change-by Will: Auto / the Scroll-position / Contents / <Custom-ident> / <animateable-the Feature>; 

/ * Parameters 
 auto: This keyword indicates that no specific intent, it applies to any heuristic is usually done and optimization 
 scroll-position: represents the will to change the scroll position of the element 
 contents: indicates that you change the content of the element 
 <custom-ident>: explicitly specified to be changed attribute with the given name 
 <animateable-feature>: Some characteristic values can be animated, such as left, top, margin, etc. 
* / 


compatibility: IE13 +, FireFox47 +, Chrome49 +, Safari9.1 +, Opera39 +, IOS9.3 +, Android52 +

 

• Practical application

div
{
    width:100px;
    height:100px;
    background:black;
}
    
div:hover
{
            animation:myfirst 5s;
         -o-animation:myfirst 5s; /* Opera */
       -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%   {background:black;}
    25%  {background:blue;}
    50%  {background:red;}
    100% {background:white;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}