Day 9 Transform Animation

Transform Common values

Translate: displacement

  • Horizontal displacement: Transform: translateX
  • Vertical displacement: Transform: translateY
  • Translate (x distance from Y distance)

Scale: zoom

  • Transform: scale (X,Y) (X represents X times the scale width and Y represents Y times the scale length)
  • Transform: scale (n)

Rotate: rotating

  • Transform: rotateX (45DEg) : represents a rotation of 45deg around the X-axis;
  • Transform: rotateY (45deg) : represents a rotation of 45deg around the y axis;
  • Transform: rotateZ (45DEg) : represents a rotation of 45deg around the Z-axis;

Skew: tilt

  • Transform: skewX (45DEg) : represents a skew of 45deg around the X-axis;
  • Transform: skewY (45DEg) : represents a skew of 45deg around the y axis;
  • Transform: Skew (45DEg) : Represents the skew around the X and Y axes

transform-origin

x,y; Changes the origin of the element deformation

  • Horizontal direction: Left center right
  • B: Top center bottom

transform-style

  • Flat: default plane
  • Preserve-3d: three-dimensional space

perspective

Represents the distance of the observer from the dance. Add this property to the parent element, whose child element has the effect of being larger near and smaller far away

Transition animations

transition

  • Transition-property :height;
  • Transition-duration: 2s;
  • Transition-timing-function: linear;
  • Delay: transition-delay: 1s;

Transition: height 2s linear 1s;

animation

  • Animation-name specifies the name of the keyframe to bind to the selector
  • Animation-duration Specifies how many seconds or milliseconds the animation will take to complete
  • Animation-timing-function Sets how the animation will complete each cycle
  • Animation-delay Sets the delay before animation starts.
  • The number of times the animation is executed: animation-rotund-count, which can be a specific number. For example, 3 means 3 times. You can set it to infinite;
  • Set the state of the animation: animation-fill-mode;
  • Forwards: When the animation is finished, stay at the last frame
  • Backwards: When there is a lag in animation, backwards will run quickly to the first frame to start animation
  • Both: When the delay is set, the animation starts quickly with the first frame and stops at the last frame when the animation ends.

Animation :name 2s linear infinite;

case

Little squares of motion

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> <style>. Main {width: 600px; height: 600px; margin:0 auto; border: 2px dashed pink; } .box{ width: 100px; height: 100px; background: yellow; animation: box 5s linear infinite; } @keyframes box{ 0%{ transform: translate(0px,0); } 25%{ transform: translate(500px,0); } 50%{ transform: translate(500px,500px); } 75%{ transform: translate(0px,500px); } 100%{ transform: translate(0px,0); } } </style> </head> <body> <div class="main"> <div class="box"></div> </div> </body> </html>Copy the code

The pendulum case

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> body{margin: 0 auto; } .box{ width: 20px; height: 200px; border: 2px solid red; margin: 0 auto; position: relative; transform-origin: center top; animation:run 3s linear infinite; } .round{ width: 100px; height: 100px; background:yellow ; border-radius: 50%; position: absolute; top: 200px; left: -40px; } @keyframes run{ 0%{ transform:rotate(0deg) } 25%{ transform:rotate(30deg); background:pink; } 50%{ transform:rotate(0deg) } 70%{ transform:rotate(-30deg); background:rebeccapurple; } 100%{ transform:rotate(0deg) } } </style> </head> <body> <div class="box"> <div class="round"></div> </div> </body> </html>Copy the code