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