css learning 12: transition, change, animation

Dynamic effect of elements

22, Transition

Transition means transition in English. Transition can be an element that switches between different states with different transition effects. It consists of four parts: the name of transition attribute, the time required for transition, the mode of transition and the delay time of transition.

1. Name of transition attribute

-'transition property 'transition style

   There must be changes in the transition. Changes in css are styles. For example, if we need to transition a color, the attribute name you want to transition is ` background color`

-When transitioning multiple styles, you can write all

2. Time required for transition

-'transition duration 'if you soften the feeling of transition, it is that the transition time is not instantaneous, but slow.

-The transition time is directly in seconds s or ms, and the default is 0s

3. Mode of transition

-'transition timing function 'transition mode. Different transition modes change the speed in motion

-Bessel curve function is very complex` http://www.css3beziercurve.net/ `Functions are very complex, but in

-css encapsulates five for us

  - The default value is slow first, then fast, and finally slow ` transition timing function: ease`

  - Slow first, then faster and faster ` transition timing function: ease in`

  - The speed is very slow at the beginning and end, and does not accelerate in the middle ` transition timing function: ease in out`

  - First fast, then slower and slower ` transition timing function: ease out`

  - Uniform speed ` transition timing function: linear`

div {
	transition-property: all;
	transition-duration: 1s;
	/*The default value is slow first, then fast, and finally slow*/
	transition-timing-function: ease;
	/*Slow first, then faster and faster*/
	transition-timing-function: ease-in;
	/*The speed is very slow at the beginning and end, and does not accelerate in the middle*/
	transition-timing-function: ease-in-out;
	/*First fast, then slower and slower*/
	transition-timing-function: ease-out;
	/*Uniform velocity*/
	transition-timing-function: linear;
}

4. Delay time of transition

-Transition delay: the time to wait before the transition effect begins to work. The value is in seconds (s) or milliseconds (ms).

-When the value is positive, it will delay for a period of time to respond to the transition effect; A negative value causes the transition to begin immediately.

5. Simplified writing

-The order is transition: transition time delay time transition mode transition style

-Note that the "order of execution time and delay time" cannot be changed

-The simplest way to write: Transition: transition time;

CSS3 Transition animation template, CSS3 Transition animation template http://web.chacuo.net/css3transition

6. Multi style transition

When transition is used for multiple styles and different transition styles at the same time, each transition style at different times needs to be separated by commas.

div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	left: 0;
	/* Note the delay time of the second */
	transition: 1s linear background-color, 1s 1s left;
}
body:hover div {
	left: 400px;
	background-color: blue;
}

26, Change

The change attribute in css is a wonderful innovation of css. The transform attribute allows a variety of functions with change effects to change elements.

There are two kinds of transformations: 2D (focus) and 3D. You need to know three axes xyz.

1.transform change attribute

The four most commonly used variation functions are:

-translate displacement

-scale

-rotate

-skew twist

2.translate() displacement function

translate() in the transformation, the displacement can have X axis   For the displacement direction of Y axis and Z axis, the parameter can use the length unit. The percentage corresponds to its own width and height. It can be straight or negative. The displacement of the Z axis can only be seen when the parent element has a perspective effect.

- `transform: translateX(x); ` Translate along the X-axis. Positive values move to the right and negative values move to the left

- `transform: translateY(y);` Translate along the Y axis. Positive values move down and negative values move up

- `transform: translate(x, y);` Translate along the X and Y axes simultaneously

-Note: displacement and fixation are different. They are not separated from the document flow and will not affect the layout of other elements

The element is centered. Before the negative margin value, you need to know the width and height of the element, but you don't need to use the translate percentage value

.box div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

3.rotate() rotation function

-The rotate() function can only rotate on the Z axis in 2d transformation, so the rotate() function defaults to the Z axis rotation function.

-The parameter is the rotation angle, and the deg unit is the rotation angle. The angle can be positive or negative.

-The rotation center point is the most central point of the element

4.scale() scaling function

-The parameters in the scale() scaling function are based on multiples, and 1 represents the current size

-Positive numbers above 1 are multiples of the current size.

-The "positive number" below 1 and above 0 is the reduction multiple.

-0 times to disappear

-When the parameter value is negative, the element is specular flipped, and the same multiple will work

5.skew() skew function

-skew() can have X-axis and Y-axis tilt angles in 2d transformation

-Fill in the rotation angle. The deg unit is the rotation angle. The angle can be positive or negative.

-skew() defaults to the X-axis tilt function

7. Execution sequence of transformation function

When transform attributes need to be superimposed, multiple transform attributes cannot be generated, but all transform functions to be used need to be added to one transform attribute, separated by spaces. However, there is a problem of sequence.

Use the console to change the rotation angle to see the effect   div:nth-child(1):hover {

transform: translateX(200px) rotate(60deg);

}

Use the console to change the rotation angle to see the effect   div:nth-child(2):hover {

transform: rotate(60deg) translateX(200px);

}

8. Base point

The transform origin attribute can change the origin of the element when it changes. By default, the central origin of the element is located at 50% of the x-axis and y-axis.

-In variation, any element has a central origin. By default, the central origin of the element is located at 50% of the x and y axes.

-There are two values for the transform origin attribute: length value and keyword.

-When the value is length, the unit can be px, em, percentage, etc.

9. Perspective effect

  (1) Perspective

In css transformation, if you want to make 3d effects, you must pay attention to the perspective distance and perspective attribute.

The larger the value of the perspective attribute, the smaller the deformation of the element.

The smaller the value of the perspective attribute, the greater the deformation of the element.

-The perspective property defines the perspective distance in length units

-Simulate the distance between human eyes and 3D changing elements

-[key] perspective distance can only be defined on the parent element of 3D change

(2) transform-style

  3D element construction means that a graphic is composed of multiple elements. You can set transform style: preserve-3d for the parent elements of these elements to make it a real 3D graphic.

-Put the box in three-dimensional space transform style: preserve-3d;    

-Place the sub box in the plane of this element (default) transform style: flat;

  (3) Rotation function x-axis and y-axis

  The rotation in 2d is the z-axis rotation. To feel the 3d effect, you need to rotate the x-axis and y-axis.

-` transform:rotateX(deg);`x axis rotation

-` transform:rotateY(deg);`y axis rotation

 

  (4) Displacement function z   axis

For the movement in 3d transformation, the positive direction in z faces the user. The larger the value, the closer it is to the user.

  • Transform: translatez (positive value) forward along the z axis (distance close to simulated vision)
  • Transform: translatez (negative value) forward along the z axis (distance away from simulated vision)

 

[practice]

  Let the playing card rotate with both positive and negative sides

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin: auto;
     perspective: 300px;
    }
    .box:hover .pk {
      transform: rotateY(360deg);
    }
    .pk {
      border: 1px solid blue;
      width: 205px;
      height: 289px;
      margin: auto; 
      position: relative;
      transition: 3s;
      transform-style: preserve-3d;
    }
    .pk>div {
      width: 205px;
      height: 289px;
      position: absolute;
    }
    .a {
      background-image: url(./poker a.jpg);
    }
    .b {
      background-image: url(./poker b.jpg);
      transform: translateZ(-1px) scaleY(-1);
    }
  </style>
</head>
<body>
  <!-- 205*289 -->
  <div class="box">
    <div class="pk">
      <div class="a"></div>
      <div class="b"></div>
    </div>
  </div>
</body>
</html>

24, Animation

Animation is to specify one or more sets of actions to be completed automatically at a specified time and in a specified way. The efficiency of animation in h5 is higher than that in js, because animation is rendered.

1. Keyframes

`@keyframes ` is a @ rule in CSS. It controls the steps in CSS animation sequence by defining the style of key frames in the animation sequence.

Specify the time when the change occurs in percentage, or through the keywords "from" and "to", equivalent to 0% and 100%.

0% is the start time of the animation and 100% is the end time of the animation.

For best browser support, you should always define 0% and 100% selectors.

@keyframes move {

0% {transform: translate(0);}

100% {transform: translate(600px);}

}

2. Animation name

`The animation name ` attribute specifies which key frame to use in the animation.

div {
	width: 100px;
	height: 100px;
	background-color: red;
	/*This element uses keyframes*/
	animation-name: move;
}
@keyframes move {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(600px);
	}
}

3. Animation duration

`The animation duration attribute represents the duration of an animation cycle, in seconds (s) or milliseconds (ms). The default value is 0 seconds.

div {
	/*This element uses keyframes*/
	animation-name: move;
	/* Animation duration */
	animation-duration: 1s;
}
@keyframes move {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(600px);
	}
}

4. Motion mode of animation

`The 'animation timing function' attribute is similar to the 'transition timing function' attribute, which is the motion mode of transition. It also has the way of encapsulation and Bessel curve.

- ease; default

- ease-in;

- ease-out;

- ease-in-out;

- linear;

-Steps positioning: start/end default end refers to step-by-step movement

[practice]

>Use the steps() function to complete the animation effect frame by frame

>The loding icon is divided into four and eight segments to complete the frame animation

 

div {
	width: 30px;
	height: 30px;
	margin: 20px auto;
	animation-name: zhuan;
	animation-duration: 1s;
}
@keyframes zhuan {
	0% { transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
.a1 {
	animation-timing-function: linear;
} /*Smooth rotation*/
.b1 {
	animation-timing-function: linear;
} /*Smooth rotation*/
.a2 {
	animation-timing-function: steps(4);
} /*Intermittent rotation is divided into 4 sections*/
.b2 {
	animation-timing-function: steps(8);
} /*Intermittent rotation is divided into 8 sections*/

5. Animation delay time

`Animation delay ` the delay time of the attribute animation is the same as that of the previous transition

div {
	/*This element uses keyframes*/
	animation-name: move;
	/* Animation duration */
	animation-duration: 1s;
	/* Movement mode */
	animation-timing-function: linear;
	/* Animation delay time */
	animation-delay: 2s;
}

6. End status

When the animation runs to a certain position, the animation stops and the element will quickly return to the starting position by default

-'animation fill mode': sets the state of the box at the end of the animation

-Attribute value: ` forwards' keeps the state after the animation is finished

-Attribute value: ` backwards ` return to the original state after the animation

7. Animated execution sequence

The animation direction property is the order in which the animation is executed

-Attribute value: normal positive, default value

-Attribute value: reverse

8. Number of animation cycles

-The 'animation iteration count' attribute is mainly used to define the number of times the animation is played.

-Its value is usually an integer, but you can also use numbers with decimals. Its default value is 1, which means that the animation will play only once from the beginning to the end.

-If the value is' infinite ', the animation will be played infinitely.

9. Abbreviation

-Animation: animation execution time delay time execution key frame name motion mode motion times end state;

-Simplest mode Animation: animation execution time, execution key frame name;

-The order of execution time and delay time is not adjustable

- `animation: 2s 3s move linear 1 forwards reverse;`

10. Animation stop

-The animation play state property specifies whether the animation is running or paused.

-Attribute value: the default value of running motion

-Attribute value: paused

.box:hover .hsl {

animation-play-state: running;

animation-play-state: paused;

background-color: blue;

}

[practice]

>Mall roll dynamics

>Use the pictures of the mall and try to write within two lines to keep the same number of lines

>Moving the mouse into the scrolling area is to stop scrolling and move away to resume scrolling

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        @keyframes move{
            0%{transform: translateX(0);}
            100%{transform: translateX(-1000px);}
        }
        *{
            margin: 0;
            padding: 0;
        }
        ul{list-style: none;}
        .wai{
            width: 1000px;
            margin: auto;
            background-color: rgb(37, 202, 243);
            overflow: hidden;
        }
        .nei{
            width: 200%;
            display: flex;
            flex-wrap: wrap;
            animation:move 10s infinite linear;
        }
        .nei:hover{
            /* Move the mouse in to pause the animation */
            animation-play-state: paused;
        }
        .nei li{
            width: 12.5%;
            text-align: center;
        }
        .nei li img{
            width: 60%;
        }
    </style>
</head>
<body>
    <div class="wai">
        <ul class="nei">
            <li>
                <img src="./img/recommend/recommend_img1.png" alt="">
                <p>association xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img2.png" alt="">
                <p>association xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img3.png" alt="">
                <p>association xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img4.png" alt="">
                <p>association xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img1.png" alt="">
                <p>association xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img2.png" alt="">
                <p>association xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img3.png" alt="">
                <p>association xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img4.png" alt="">
                <p>association xzp9886</p>
            </li>
        </ul>
    </div>
</body>
</html>

11. Open source CSS animation library

-Download animation.css: http://www.animate.net.cn/

-Add the required class name to the element

-The current element uses the animate attribute. The attribute values are the class name and runtime

-You need to add 'animate' to the element first__ Animated ` class, and then add other classes

<head>
	<link rel="stylesheet" href="./animate.min.css" />
	<style>
		div {
			width: 200px;
			height: 100px;
			background-color: red;
			animation: 1s animate__rubberBand;
		}
	</style>
</head>
<body>
	<div class="animate__rubberBand">element</div>
	<div class="animate__animated animate__shakeX" id="div2">Automatic call</div>
</body>

Tags: html5 css

Posted on Thu, 16 Sep 2021 19:05:54 -0400 by a.beam.reach