First of all, we want to do a movie with css3 inevitably use to transform both animation and attribute values.
transform usage
First of all it, we transform the combination of a total of five kinds, namely:
transform: Translate ();
transform: Rotate ();
transform: Scale ();
transform: skew ();
transform: Matrick;
transform：translate（）
Next we talk about transform: translate (); meaning and usage represents.
Meaning: let the elements be moved to the current location of the x, y-axis.
#box {transform: translate (100px, 100px);} This code id does mean that the elements are named box along the x-axis and y-axis 100px (Note: two numbers separated by a comma). As shown: before and after movement comparison:
transform：rotate（）；
Rotate and then, it is to represent the rotating elements, which may be a negative value, which value is positive when the number representing the clockwise rotation of the element; is negative, counterclockwise rotation of the element; units can be table deg angle (in degrees), rad rad table. For example
: #box {transform: rotate (45deg / * -45deg * /);} id is represented by the element rotation angle of 45 ° box. FIG: Comparison before and after rotation in FIG.
transform：scale（）；
represents a zoom scale, is the face of the element zoom in or out on the basis of the initial size of the element.
Usage:
Transform: Scale (num); this time value represents the inside num enlarged or reduced while the width and height of the element.
transform: scale (num1, num2) ; this time scale there are two values, the first of which represents the width value and the second value indicates a high. For example:
#box {Transform: Scale (2, 3);} This code means that the width of the box element named id enlarged 2 times, 3 times higher amplification. Before and after comparison: as shown in FIG.
transform：skew（）；
skew property represents miter. transform: skew (num1, num2) ; wherein x represents num1, the x-direction, tilt, meaning that the elements tilt in the y direction; y represents num2, Similarly, the y-direction is inclined along the x-axis direction elements inclination; skew in units of "deg";
e.g. Code: #box {auto; transform: skew (30deg, 30deg);}
contrast effect will appear as shown in FIG front:
transform-origin
It is to change the point position is translated elements. 2D conversion element capable of changing the elements x and y axes. 3D conversion element can change its Z-axis.
Note: This property must be used with transform properties.
animation usage
Principle: frame by frame animation. Will entire movement, divided into 100 parts.
animation is triggered after the page loads; can set the number of plays may have been playing, acting on the element itself rather than style attributes, you can use the concept of keyframes, can achieve more freedom of animation.
animation-name:; animate name (can freely write)
Animation-DURATION:; animation representing the time required to complete a cycle, unit: seconds or milliseconds
animation-delay:; represents a delay time before the movie starts
animation-iteration- count:; repetitions represents the animation, the default value is 1, infinite infinite number of
animation-timing-function:; motion animated form, that is, the speed curve
animation-direction: attribute defines whether the animation should be played in reverse rotation. Where: alternate: one forward, one reverse
reverse: Reverse is always
normal (default): always forward
animation-fill-mode: the provisions of animation before or after its animation is visible.
none (default value): return to the initial position after the end of the movement, in the case of a delay, so 0% to take effect after a delay
backwards: in the case of a delay, so 0% effective before the delay
forwards: after the end of the movement stop to the end of
both: backwards and forwards at the same time take effect
animation-fill-mode on: the css code is as follows:
<style> #box1{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move;/* 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效 */ } #box2{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode : backwards; /* 在延迟的情况下，让0%在延迟前生效 */ } #box3{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode: forwards;/* 在运动结束的之后，停到结束位置 */ } #box4{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode: both;/* backwards和forwards同时生效 */ }
@keyframes move { 0%{ transform:translate(0,0); background:blue;} 100%{ transform:translate(400px,0)} }
#box{width:100px; height:100px; background:red; margin:10px; animation: 3s wjt infinite;/* 无限次数 */ animation-direction: alternate; } @keyframes wjt { 0%{ transform:translate(0,0);} 100%{ transform:translate(400px,0)} } </style>
Composite wording: animation: 2s 3s wjt linear infinite ;
respectively are: left to right: the animation time needed to complete a cycle; delay time before the start of the animation; animation name; animation speed curve; the number of completed animation .
Keyframe
@keyframes + animation name {
from {}
to {}
}
which represents a starting point from a position equivalent to 0%; to represent the end position is equivalent to 100%;
Note: By default, the element movement is completed, We will stay to the starting position.
Here is a line animation ball inside a moving object.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #main{ width: 600px; height: 600px; border: 1px solid black; position: relative; } #main .main-pic{ width: 100px; height: 100px; position: absolute;left: 0;top: 0; animation: 4s -2s wjt linear infinite; transition: 4s; border-radius: 50%; background:linear-gradient(yellow , hotpink) } @keyframes wjt{ 0%{transform: translate(0 , 0)rotateZ(0deg);} 25%{transform: translate(500px , 0)rotateZ(360deg);} 50%{transform: translate(500px , 500px);} 75%{transform: translate(0 , 500px)rotateZ(360deg);} 100%{transform: translate(0 , 0)rotateZ(360deg);} } </style></head><body> <div id="main"> <div class="main-pic"></div> </div></body>
