Transition and animation of CSS3 new feature application

First, the slow action effect

• Learn and use Bezier curves, default support ease,ease-in,ease-out,ease-in-out and linear, etc.

• Also provides a starting and ending point for a cubic-beizer custom Bezier curve

• Only one Bezier motion is supported in CSS and cannot be multiple consecutive segments

• The inverse version cubic-beizer (. 1,.25,1,.25) of any adjustment function can be obtained by exchanging the horizontal coordinates of the control anchor points in the Cubic-beizer with the vertical coordinates, which is the inverse adjustment function of ease.

• Horizontal coordinates can only be within the range of 0~1, because horizontal coordinates represent time

• Vertical coordinates can exceed this range, expressed as the distance of motion

• Sample code

 

 
  
 
   
Using Transitions (transition) to achieve
 
   
Note, however, that the default value of all is Transition-property, and all properties that can be staged will be filtered
 
   
Example code:
 
  

 




Second, frame-wise animation


  

 
   
 
    
Animation-timing-function in the steps function, mainly with his implementation of frame animation, he is a step function, a total of two parameters
 
    
 
     
Timing-function is applied between every two keyframes, not the entire animation process
 
     
Parameter one: A number that represents the number of intervals in the time function (must be positive)
 
     
Parameter two: Accept the start and end two values, specify a step change at the beginning or end of each interval, the default End,step-start and Step-end are steps (1,start) and Steps (1,end) respectively
 
    
 
    
Example code:
 
   

  



Three, flicker effect

Two flicker effects are achieved, one is smooth flashing, the other is frame flashing (closer to reality)


   

 
    
 
     
Smooth Flashing
 
    

   
The main use of Animation-iteration-count and animation-direction two attributes implemented.
1.animation-iteration-count: Indicates the number of times the animation was executed
2.animation-direction: Indicates whether the animation should rotate backwards to play the animation, if the value is alternate, animation-iteration-count must be an even number, because it is odd to play normally, even reverse play


   

 
    
 
     
The code is as follows:
 
    

   

<style>    @keyframes blink-smooth{        to{color:transparent;}    }    . wrap{        animation:1s Blink-smooth;        Animation-iteration-count:6;        animation-direction:alternate;    } </style><p class= "Wrap" > I was smooth to show and hide three times </p>


   

 
    
 
     
Frame Flicker
 
    

   
Using the steps implementation of the Animation-timing-function property, the animation is performed as a result of steps specifying two keyframes divided into several fragments
1.animation-timing-function:steps (1), then match on the animation in 50% to achieve a transparent can


   

 
    
 
     
The code is as follows:
 
    

   

<style>    @keyframes blink-smooth02{        50% {color:transparent;}    }    . wrap02{        animation:1s blink-smooth02;        Animation-iteration-count:3;        Animation-timing-function:steps (1);    } </style><p class= "Wrap" > I am Frames-by-frame display and hide three times </p>

Iv. Typing effect (only one line in English is supported)

Need to use the following features:
1. Equal width font, then add CH to this unit, CH is the width of the character ' 0 '.
2. Use animations to change the width of the element from 0 to the maximum width.
3. Use steps (1) to have each keyframe place the animated code as follows:





Animation of Smooth State

Use the Animation-play-state property to animate the pause and play function, and to change the positioning of the background. The sample code is as follows:





Six, the animation along the ring-shaped path translation

This is important, and the deformation functions in transform (such as: rotate,transflate, etc.) all affect the entire coordinate system of the element. This means that the rotate rotates the entire coordinate system. This is the basis for implementing a path translation with one element along the loop. Schematic diagram is as follows:



     

 
      
 
       
Two element scheme, Transform-origin + rotate can be implemented, but the HTML structure requires two elements, the following code:
 
      

     


Description
1..spin transform-origin:50% 150px, is the localization of the transformation origin;
2. Due to the need to implement the spin ring motion, the transform intrinsic characteristic is that element + element inner sub-elements are transformed, so the IMG element needs to be reversed
3. Two ways to reverse the deformation: A: Write a reverse deformation animation, B: Inherit the parent's animation, with animation-direction refers to the positioning of reverse to reverse.


      

 
       
 
        
Single element scenario, with translate and rotate (multiple exploits), the HTML structure has only one layer, the code is as follows:
 
       

      


Description
1. An img then moves along the ring path, which in itself cannot be rotated, then two sets of displacements and rotations are required
2. First set of displacements + rotations, realizing the IMG element moving along the ring path


Translate (50%, 150px) rotate (0turn) translate ( -50%, -150px)

3. The second set of displacements + rotations, realizing that the IMG element itself is fixed


Translate (50%, 50%) rotate (1turn) translate (-50%,-50%)


       

 
        
 
         
The two element scheme Master single element scenario is as follows: