CSS3- animation

CSS3- animation

 

@keyframes rules for creating animations. CSS styles in the provisions of an @keyframes, the energy created by the current style gradually changed to a new style of animation.

Name @keyframes animated animation-name rules. 

animation-duration seconds or milliseconds predetermined animation completes takes one cycle. The default is 0 

animation-timing-function speed profile     

    ease the default first slow, then fast, then slow     

    linear uniform     

    ease-in: from slow to fast.     

    ease-out: from fast to slow.     

    ease-in-out: from slow to fast and then slow.     

    step-start the mouse to jump start that frame     

    step-end skip to the end of that frame mouse

 

 

 

animation-delay specify when the animation starts. The default is 0, negative values ​​are allowed;

The number of times the animation is played animation-iteration-count requirements. The default is 1, 

    infinite infinite loop 

animation-direction specifies whether the animation to play in reverse to the next cycle. The default is "normal"     

    alternate reverse play 

animation:name duration timing-function delay iteration-count direction; 

animation-play-state specifies whether the animation is running or paused. The default is "running".     

    paused pause 

animation-fill-mode state beyond a predetermined time animation object.     

    none Do not change the default behavior     

    When after completion forwards, holding the last attribute value (defined in the last key frame).

 

 

Note: @keyframes the creation of an animation, and bound to a selector, it would not animate. At least the following two CSS3 animation properties can be bound to select the animation through provisions:

1. Under the name of the animation 

2. The provision of long-time animation 

Internet Explorer 10, Firefox and Opera support @keyframes rules and animation properties. 

 

Internet Explorer 9, and earlier versions do not support @keyframe rules or animation attributes.

 

 

CSS3-3D Introduction

 

Conversion is to make an effect element changes the shape, size and position. You may be used to convert 2D or 3D conversion element. In our concept of converting them: there is no display of say, to achieve transparency by changing the elements from scratch

 

 

 

CSS3- depth of field

 

 

perspective depth of field (value) from the screen to observe how far the elements, the more significant the smaller the value (common value 900px-1200px)

# {Div1     

    position: relative;     

    height: 150px;     

    width: 150px;     

    margin: 50px;     

    padding:10px;     

    border: 1px solid black;     

    perspective:150px;     

    -webkit-perspective:150px;  /*Safari and Chrome */ 

}

 

 

 

 

 

 

 

rotateX () method (an element about its axis of rotation X given in degrees)

Note: Add more obvious transition effects 

div{     

    width:100px;     

    height:75px;     

         

    border:1px solid black;     

    transition: all 5s; 

} 

 

div:hover{     

    transform:rotateX(-180deg);     

    -webkit-transform:rotateX(-180deg); /* Safari and Chrome */ 

}

 

 

 

 

rotateY () method (an element about its axis of rotation Y given in degrees) 

 

div{     

    width:100px;     

    height:75px;     

         

    border:1px solid black;     

    transition: all 5s; 

} 

 

div:hover{     

    transform:rotateY(-180deg);     

    -webkit-transform:rotateY(-180deg); /* Safari and Chrome */ 

}

 

 

 

translate3d () function effects transform: translate3d (30px, 30px, 200px); represents X axis, Y axis, Z axis (a negative value after the first positive)

transform-style property defines how nested elements are rendered in 3D space. preserve-3d perspective view showing 3D