catalogue
Multi attribute value transition
Application: realize centering (it is not required to know the width and height of the box)
Modify the properties of the deformation center
Compound writing of deformation attributes
Depth of field attribute (sight distance)
Keep 3d state (used to display 3d effect when no event is triggered)
Keyframe animation (gap animation)
css3 animation library animation.css
transition over animation
Transition: attribute name to transition Duration s Delay time 0s Motion curve; Who makes the change and writes it to who!
(1) Write it on the box After the event is triggered, the transition animation is executed in reverse order once Final - initial plus transition!!
(2) Generally speaking, the event triggers: hover: active
Write in the event: active After the event is triggered, the transition animation ends There will be no more duration when returning to the original state!!
transition:Property name duration to be exceeded s Delay time 0 s Motion curve; 1. The attribute to be transitioned must have a specific value that can be calculated!! width,height,background-color,opacity...Can transition however display:none/block visibility:hidden/visible text-align:left /center Transition is not supported; 2. Duration attribute value is essential!! 3. The delay time is 0 by default s 4. Motion curve linear Uniform velocity ease Slow down(slow--fast--slow)((default) ease-in End quickly
Multi attribute value transition
transition: width 2s 0s linear,height 1s 0s linear,opacity 1s 0s linear.....; transition:all 1s;//If the duration delay time motion curves of all attributes to be changed are consistent, it is omitted transition:1s;//all is omitted
2d deformation transform
Inline elements cannot be animated
translation
transform:translate(x,y) level x vertical y +x +y -x -y transform:translate(300px,500px); transform:translate(50%,-50%) Half its width and height
Company: + xpx,+ypx To the positive direction of the x-axis (right) and the positive direction of the y-axis (bottom)
- xpx ,- ypx x reverse direction (left) y reverse direction (up)
+ x% Moved x% of its width to the right
50%,0% Moved half its width to the right!!
- 50%,0% Moved half its width to the left!
+ y% Moved down y% of its height
+ 50% Moved down half its height!!!
rem
transform:translate(2rem,-3rem)
Application: realize centering (it is not required to know the width and height of the box)
div { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
zoom
transform:scale(w,h); w,h=0 w<1 narrow w>1 enlarge transform:scale(1.2);Equal scale magnification w: Is a multiple of the width h: Is a multiple of the height w=h Then just write a value!!! transform: scale(2,2);=== transform: scale(2); w,h>1 enlarge w,h<1 narrow w,h = 1 No change w,h=0 No, it's gone
Apply: display fonts smaller than 12px
Default font: font size: 12px display 10px font block in line + box of block type + transform:scale(10/12);
rotate
transform:rotate(ndeg);+ndeg Clockwise rotation -ndeg Counterclockwise rotation
Rotate the reference origin (center point) to the center of the box center/50% 50%)
When you write only one value, the second value defaults to center
tilt
transform:skew(xdeg,ydeg); xdeg stay x The axis is tilted in degrees xdeg y stay y The shaft is tilted -xdeg stay x Positive tilt +xdeg stay X Tilt in negative direction +ydeg toward y The axis is tilted in the negative direction -ydeg toward y Positive tilt of axis transform:skew(xdeg) only x Axis tilt
Modify the properties of the deformation center
d,3d Modify deformation Center transform-origin:center center(Default, center) xpx ypx/ x% y% /right top bottom left center transform-origin:100% 0%; Change the deformation center to the upper right corner of the box
Compound writing of deformation attributes
Change styles can be written in a compound way, such as transform: scale() translate() skew() rotate();
Changing the order of multiple style values within a style can lead to completely different results
transform:translateX(200px) translateY(300px) rotate(45deg);
transform:rotate(45deg) translateX(200px) translateY(300px) ;
3D deformation animation
3d coordinate system -- left hand rule index finger (y), middle finger (z) thumb (x)
3d translation
ttransform:translate3d(x,y,z);z Represents along z translation +z Move in positive direction -z Negative direction movement transform:translateX(300px); transform:translateY(300px); transform:translateZ(300px); transform:translate3d(300px,300px,300px); transform:translateX(300px) translateY(300px) translateZ(300px);(Chronological order)
Unit px / % / rem
x Translate along the X axis
+ zpx Translate in the positive direction of the Z axis (the Z axis is directly in front of the deformation box) Come out of the screen + z Go to screen -z)
Depth of field attribute (sight distance)
Not for 0 sight distance -- "form a 3d effect, 3d space --" near large far small
perspective:800px;( 600px--1000px) 800px It means your eyes to 3 d There are 800 deformed objects px Distance
Make sure that the depth of field distance from your eyes to the box is the same!!
You just write the depth of field on the box. Box!
one Write it on the parent box perspective:600px;
two Write it on yourself Add to deformation attributes perspective()
transform:perspective(500px) rotateY(30deg);
one Generally, it is set to the parent box of the deformation element, that is, the depth of field is used to create a 3d effect when the event is triggered
3D rotation
transform:rotate3d(x,y,z,ndeg); x:1/0 1:along X The axis has a rotation of 0 x The shaft does not rotate y:1/0 1:along y The axis has a rotation of 0 y The shaft does not rotate z:1/0 1:along z The axis has a rotation of 0 z The shaft does not rotate x: 1/200/300 Representative in x There is rotation on the shaft x: 0 Representative in x There is no rotation on the shaft ndeg Represents the number of degrees of rotation
Rotate about X axis:
transform:rotate3d(1,0,0,45deg); Around x The shaft rotates 45 deg Equivalent to transform:rotateX(45deg);
Rotate about Y axis:
transform:rotate3d(0,1,0,45deg); Around y The shaft rotates 45 deg Equivalent to transform:rotateY(45deg);
Rotate around Z axis
transform:rotate3d(0,0,1,45deg); Around z The shaft rotates 45 deg Equivalent to transform:rotateZ(45deg);
Rotate around surface
transform:rotate3d(1,1,0,45deg); Around x Shaft and y The plane diagonal composed of the axis rotates by 45 deg
Rotation around body
transform:rotate3d(1,1,1,45deg); Around x Shaft and y Shaft and z The body composed of the shaft rotates diagonally by 45 deg
Back hide attributes
backface-visibility: hidden hide/visible Visible(default);
When does one side become the opposite?
Rotate 180deg or - 180deg Browsers think it's the opposite
Keep 3d state (used to display 3d effect when no event is triggered)
transform-style:preserve-3d Reserved 3 d effect/flat Back to 2 d State (return to original state default)
No mouse events are required You can maintain the degree of rotation!!
Event de triggering : hover : Active (transition) + Depth of field creates 3d space!!
Without event triggering + Keep the attributes of 3d effect and create 3d space!!!
Keep the properties of 3d effects:
Transform style: preserve-3d / flat
Also write on the parent box!!!
Keyframe animation (gap animation)
Trolley turn back: initial state (100px, 100px) - -- > install it in front of the tree (400px, 400px) - -- > turn around (300px, 300px) - -- > initial position
Animation: persistence of multiple states!!! Event triggering is not required
definition
@keyframes The name of the animation { //Several key states 0% { //Initial state css code; } ..... n%{ } 100% { //Final state } }
animation:Name of the animation duration [time delay of the motion curve, number of times of execution, whether the state of back and forth motion, the state of the last frame of the animation]; The name of the animation animation-name:The name of the animation; Duration animation-duration:ns; Curve of motion animation-timing-function:linear/ease/ease-in/ease-in-out.. Time delay animation-delay: ns; Number of executions animation-iteration-count:1 default/2/3/infinite; Round trip animation-direction:normal No round trip/alternate return State of motion animation-play-state:running play/paused stop it The state of the last frame of the animation animation-fill-mode: forwards The animation remains at the last frame/backwards The animation returns to the first frame both:When the animation is not executed, keep the state of the first frame of the animation. After execution, keep the state of the last frame!
css3 animation library animation.css
website: Animate.css | A cross-browser library of CSS animations.
Import animation library:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>
Use animation
<h1 class="animate__animated animate__bounce">An animated element</h1>