CSS positioning and CSS animation

The CSS positioning

1. The difference between layout and positioning

\ Quad layout refers to the plane of the screen, positioning is perpendicular to the screen. A div hierarchy:

2. Position attribute

2.1 Available value range

Static – The default, stays in the document flow.
Relative – Relative position, raised but not out of the document flow. You can configure the cascading style with z-index. The default z-index value is AUTO, which does not create the cascading context. – 2-1, 0, 1, 2… equivalent
Absolute – The definition base is the non-static element in the first ancestor. Used to separate from the original position, another layer, such as dialog box close button, mouse prompt, can also be used with z-Index. Absolute is usually used with the position:relative specified in the parent element, otherwise the entire screen is used as a baseline. 2. If you do not write top/left, some browsers may mess up the position.
Fixed – Fixed position. The positioning base is the viewport, which is the window displayed on the page. Generally used to make some fixed in the window of the button. One caveat: Try not to use this property on mobile phones.
Sticky – sticky positioning

A div hierarchy:

CSS animations

1. Browser rendering process

Build an HTML tree from HTML (DOM tree)
Building a CSS Tree from CSS (CSSDOM)
Combine two trees to render a single tree
Layout (document flow, box model, calculate size and position)
Paint (to draw border colors, text colors, shadows, etc.)
Compose (display screen according to cascade relationship)

Developers.google.com/web/fundame…

2.transform

\ Quad can use: MDN to learn the address and see the details.

2.1 Four common functions

Displacement:translate
Zoom:scale
Rotation:rotate
Tilt:skew

2.2 translate the transform

translateX<length-percentage>— Moving in the X direction (%Based on its own width)
translateY<length-percentage>— Moving in the Y direction (%Based on its own height)

translateZ<length>I’m moving in the Z direction

By default, our view of the page is directly above the page, so we can’t tell the difference in the z-axis movement. Therefore, the viewpoint needs to be specified:

.demo{ perspective: 1000px; /* Refers to the center of the page, 1000 pixels into the screen */ border: 1px solid red; }Copy the code

\quad X,Y scaling can be shortened to translate(X,Y), for example translate(50px,50px). The zoom in the X,Y, and Z directions can be abbreviated to translate3D (X,Y,Z), for example translate(50px,50px,100px), see MDN- Translate for more information.

Lesson of thumb: This can be used if you need to put the element in the center of the decision to position the elementtranslate(-50%,-50%). Such as:

< div class = "demo" > < div id = "child" > CSS animations < / div > < / div >Copy the code

#child{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        .demo{
            border: 1px solid black;
            height: 500px;
            position: relative;
        }
Copy the code

2.2 Scale of transform

Commonly written:scaleX(<number>)|scaleY(<number>)|scale(<number>,<number>?)

Example:

< div class = "demo" > < div id = "child" > CSS animations < / div > < / div >Copy the code

#child:hover{
            transform: scaleX(2);
        }
Copy the code

Transition: all 1s; You can achieve the effect of animation.

2.3 Transform rotate

Commonly written:rotate([<angle>|<zero>])|rotateX([<angle>|<zero>])|rotateY([<angle>|<zero>])|rotateZ([<angle>|<zero>])

Example:

        #child:hover{
            transform: rotate(45deg);
            transition: all 1s;
        }
Copy the code

2.4 Skew of Transform

Commonly written:skewX([<angle>|<zero>])|skewY([<angle>|<zero>])|skew([<angle>|<zero>],[<angle>|<zero>])

2.5 Combined Use

\ Quad The variations mentioned above can be used in combination, separated by Spaces.

3. Transition – Used to complement intermediate frames

\ Quad can use: MDN to learn the address and see the details. Grammar:

1. Transition: The attribute name duration is delayed

Such as:transition:left 1s linear
2. You can separate different attributes with commas

Such as:translation:width 1s linear,height 1s linear
3. Modes of transition include:Linear (linear) | ease (default) | ease - (fade) | in ease - out (out of) | ease - in-out (fade in and fade out) | cubic bezier - | step - start | | step - end stpes, for specific meanings, please refer to:timing-function in mdn
4. Both delay time and duration can be used in the same ways msThe unit.

3.1 Note: Transitions can not be added to all attributes

display:none =>blockYou can’t make the transition
Transparency of the transition can be passedvisibility:hidden => visibleThe implementation. But be careful if you useopacity 1=>0Even if the element is not visible, it still occupies the position of the page
The transition of color, which can be achieved, is also a numerical change in nature

3.2 How to add intermediate states in transition process

\ Quad transition process must have two initial states, such as hover or non-hover, then need to add intermediate states, how to achieve?

1. Use it twicetransform(Not recommended)
2. UseanimationExample:

Declare keyframes:

@keyframes aniAction { 0%{ transform: none; } 50%{ transform: translateX(100px); } 100%{ transform: translateX(100px) translateY(100px); }}Copy the code

Call the action in Translate:

#head:hover{animation: aniAction forward 1.5s; /*forwars is used to stop on the last frame */}Copy the code

@ keyframes – MDN tutorial

Animation grammar

Length: to s | ms for the unit
Transition mode: The value is the same as transition, such as Linear ease
Times: 1 2 3…. An infinite number of times
Direction: reverse | alternate | alternate – reverse
Filling pattern: none | recently | backwards | to both
Whether to suspend: paused | runnning

Animation – MDN tutorial

4. Create a beating heart with animation

\ Quad Beating Heart -Github address