CSS Knowledge Summary

How animation works

define

  • Composed of many still frames
  • To play continuously at a certain rate (e.g., 30 pictures per second)
  • The naked eye produces an illusion from a visual remnant
  • They mistook it for a moving picture

concept

  • Frames: Each still picture is called a frame
  • Playback speed: 24 frames per second (video) or 30 frames per second (game)

How browsers render

steps

  • Build AN HTML tree from HTML (tree)
  • Building a CSS Tree from CSS (CSSOM)
  • Combine two trees into a render tree
  • Layout (document flow, box model, calculated size and location)
  • Paint (to draw border colors, text colors, shadows, etc.)
  • Comepose composition (display screen according to cascading relationships)

The three trees

How to update styles

General JS to update the style

  • For example, div. Style. background = ‘red’
  • For example, div. Style. display = ‘none’
  • Such as div. ClassList. The add () ‘red’
  • For example, div.remove() removes nodes

Three update modes

  • The first option is all go

Div.remove () triggers the current disappearance of other elements relayout

  • Second, skip layout

Change the background color to repaint+ Composite

  • Third, skip Layout and Paint

To change the transform, just composite (note that the effect must be viewed in full screen, in the iframe)

CSS Animation optimization

  • View insist only synthesizer properties and counting management | Web | Google Developers
  • JS optimization: Use requestAnimationFrame instead of setTimeout or setLntervl
  • CSS optimization: Use will-change or translate

transform

Four common functions

  • The displacement of the translate
  • The zoom scale
  • Rotate the rotate
  • Tilt skew

Experience:

  • You usually need to coordinate transition
  • Inline elements do not support a transform and need to be changed to a block first

transform: translate

  • TranslateX (pixel (px)/percentage (%))
  • TranslateY (px / %)
  • Translate (< pixel/percentage >,< pixel/percentage >?)
  • TranslateZ (pixels) with parent container plus perspective
  • translate3d(x,y,z)

Experience:

  • Look at MDN syntax
  • Translate (-50%,-50%) The element is centered
#demo{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

The sample

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    .wrapper{
  border: 1px solid black;
  position: relative;
  height: 400px;
}
#demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
  margin: 150px;
  background: pink;
  transition: all 1s;
}
#demo:hover{
  transform: rotateZ(45deg) scale(1.5);
}
  </style>
<body>
  <div class="wrapper">
    <div id="demo"></div>
  </div>
</body>
</html>
Copy the code

transform: scale

  • ScaleX (multiple)
  • ScaleY (multiple)
  • Scale, multiple

Experience:

  • Use less, easy to appear blurred

transform: rotate

  • rotate( | )
  • rotateZ( | )
  • rotateZ( | )
  • rotateY( | )
  • rotate3d

transform: skew

  • sskewX( | )
  • skewY( | )
  • skew( | )

Transform can be used in combination

  • Transform: scale (0.5) Translate (-100%, -100%);
  • The transform: none; Cancel all
  • Examples demonstrate

The transition transition

role

  • Supplementary intermediate frame

grammar

  • Transition: Indicates the delay of the attribute name duration
  • transition: left 200ms linear
  • You can separate two different attributes with a comma
  • The transition: left200ms top400ms
  • You can use all to represent all attributes
  • transition: 200ms
  • Excessive way: * * linear | ease | ease – in | ease – out | ease – in-out | * * cubic bezier – | step – start | | step – end steps, specific meaning depends on mathematical knowledge

Not all attributes can be overdone

  • Display: None => Block cannot transition
  • To change your visibility: hidden => visible
  • Background colors can transition
  • Opacity can be transitioned

animation

Abbreviation of grammar

  • Animation: | | transition way long delay | | | times direction whether filling | | suspended animation
  • Duration: 1s or 1000ms
  • Transition mode: the same as transition
  • Degree: 3 or n or infinite
  • Direction: reverse | alternate | alternate – reverse
  • Filling pattern: none | recently | backwards | to both
  • Whether to suspend: paused | running
  • Each of these attributes has a corresponding individual attribute

@keyframes

  • Power demonstration: Beating heart