Animation, 2D conversion, 3D conversion how to use

Animation

    @keyframes rules are used to create animations.          By stipulating a CSS style in the @keyframes, you can create an animated effect that changes from the current style to the new style. property {[email protected] 2animation} such as: @keyframes Myfirst {from {Backgro            und:red;}            to {Background:yellow;}            } @-moz-keyframes Myfirst/* Firefox */{from {background:red;}            to {Background:yellow;}            } @-webkit-keyframes Myfirst/* Safari and Chrome */{from {background:red;}            to {Background:yellow;}            } @-o-keyframes Myfirst/* Opera */{from {background:red;}            to {Background:yellow;}                 ---------------------------------------------------you create an animation in a @keyframes, bundle it to the specified 1. Name of the animation    2. Specify the duration of the animation, otherwise it will not produce animation effect.            such as: div {Animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */-webkit-animation: Myfirst 5s;   /* Safari and Chrome */-o-animation:myfirst 5s;    /* Opera */} uses percentages to specify when changes occur, or the words "from" and "to", equivalent to 0% and 100%.        ---------Change the background color when the animation is 25% and 50%, and then change it again when animation 100% finishes: @keyframes Myfirst {0% {background:red;}        25% {background:yellow;}        50% {background:blue;}        100% {background:green;}        } @-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;} }    -------------------------------Attribute Description @keyframes the specified animation. Animation The shorthand properties of all animated properties except the Animation-play-state property Animati     ON-NAME Specifies the name of the @keyframes animation. Animation-duration specifies the seconds or milliseconds that the animation takes to complete a cycle.      The default is 0. animation-timing-function Specifies the speed curve of the animation.    The default is "ease". Animation-delay Specifies when the animation starts.     The default is 0. ANIMATION-ITERATION-COUNT specifies the number of times the animation is played.     The default is 1. Animation-direction Specifies whether the animation will play backwards in the next cycle.      The default is "normal".                          ANIMATION-PLAY-STATE Specifies whether the animation is running or paused.     The default is "running".    ANIMATION-FILL-MODE specifies the state outside the animation time of the object. ----------------------------------------------

Conversion

    : With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements. 2d2d Conversion Method: Translate () rotate () scale () skew () matrix () such as: Div{transform:rotate (30deg);-ms-trans       Form:rotate (30DEG);   /* IE 9 */-webkit-transform:rotate (30deg);        /* Safari and Chrome */-o-transform:rotate (30deg);      /* Opera */-moz-transform:rotate (30deg); /* Firefox */} through the Translate () method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters.       such as: Div{transform:translate (50px,100px);-ms-transform:translate (50px,100px);   /* IE 9 */-webkit-transform:translate (50px,100px);        /* Safari and Chrome */-o-transform:translate (50px,100px);      /* Opera */-moz-transform:translate (50px,100px);    /* * Firefox */} through the scale () method, the size of the element will increase or decrease, depending on the given width (X axis) and height (Y axis) parameters: such as div {transform:scale (2,4);  -ms-transform:scale (2,4);  /* IE 9 */-webkit-transform:scale (2,4);   /* Safari and Chrome */-o-transform:scale (2,4); /* Opera */-moz-transform:scale (2,4); /* Firefox */} through the skew () method, the element flips the given angle, according to the given waterHorizontal line (X axis) and vertical line (Y axis) Parameters: Div{transform:skew (30deg,20deg),-ms-transform:skew (30DEG,20DEG);   /* IE 9 */-webkit-transform:skew (30deg,20deg);    /* Safari and Chrome */-o-transform:skew (30DEG,20DEG);  /* Opera */-moz-transform:skew (30deg,20deg); /* Firefox */}matrix () method The Matrix () method combines all 2D conversion methods. The matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements. For example: Use the matrix method to rotate the DIV element 30 degrees: Div{transform:matrix (0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix (0.866,0.5,-     0.5,0.866,0,0); -moz-transform:matrix (0.866,0.5,-0.5,0.866,0,0);-webkit-transform:matrix (0.866,0.5,-0.5,0.866,0,0);-o-      Transform:matrix (0.866,0.5,-0.5,0.866,0,0); }

3D Conversion

3D 转换方法：rotateX() rotateY() 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。如：div{transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */-moz-transform: rotateX(120deg);    /* Firefox */}通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。如：div{transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */-moz-transform: rotateY(130deg);    /* Firefox */}属性                描述 transform        向元素应用 2D 或 3D 转换。 transform-origin 允许你改变被转换元素的位置。 transform-style  规定被嵌套元素如何在 3D 空间中显示。 perspective       规定 3D 元素的透视效果。 perspective-origin 规定 3D 元素的底部位置。  

Animation, 2D conversion, 3D conversion how to use