current position:Home>[CSS] transition, transformation and animation
[CSS] transition, transformation and animation
2021-08-26 00:47:20 【Ruovan】
This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details :8 Yuegengwen challenge
CSS3 transition ——transition
Usually with
hover
Use it with
- grammar
div {
width: 100px;
height: 100px;
background-color: red;
/* Who makes the transition, who adds */
/*transition:transition-property transition-duration transition-timing-function transition-delay*/
/*transition: Changing attributes Spend time Motion curve When to start ;*/
transition: width 1s ease 1s;
/* If you want to change multiple properties , You can use commas to separate */
transition: width 1s, height 1s;
/* Or use all Instead of */
transition: all 1s;
}
div:hover {
width: 200px;
}
Copy code
-
transition-timing-function
Motion curve attribute values :- linear—— uniform
- ease—— Slow down gradually ( The default value is )
- ease-in—— Speed up
- ease-out—— Slow down
- ease-in-out—— Speed up first, then slow down
CSS Of 2D transformation
One 、 Big concept
-
CSS3 The transformation can transform the elements in the page :
- Move :
translate
- rotate :
rotate
- The zoom :
scale
- Move :
-
CSS3 All conversion methods belong to
transform
attribute
Two 、 Small details
01. translate
-
translate(x,y)
Define where to move-
It can be Specific value , It can also be percentage ( Percentage means Move the element itself Width or height of )
-
It can be a number , It can also be two values
- A numerical value represents X Coordinates and Y Coordinate equals
- The two values represent X Coordinates and Y coordinate
-
Or you can just move X Coordinates or Y coordinate
translateX(100px);
translateY(100px);
-
translate The movement does not affect the position of other elements
No effect on inline labels
div:hover {
/* And then use translate Define where the element is moved */
transform: translate(100px, 100px);
/* You can also move separately X coordinate , perhaps Y coordinate */
/* But it should be noted that , You can't set... At the same time , Simultaneous setting , Only the last one will take effect ! */
/* transform: translateX(100px); */
/* transform: translateY(100px); */
}
Copy code
(1) Percentage application
- The box is centered horizontally and vertically
/* Percentage application : The box is horizontal / Vertical center */
.son {
/* Absolute positioning */
position: absolute;
width: 100px;
height: 100px;
background-color: red;
/* Positioning position 50%*/
top: 50%;
left: 50%;
/* Move half the width and height of the child element itself , Reach the center of the box */
transform: translate(-50%, -50%);
}
Copy code
02. transform-origin
-
transform-origin:X Y
Define the center of rotation- The default value is :50% 50%
- Can be set up Exact value | Position NOUN | percentage
03. rotate
-
rotate(angle)
Define element rotation :rotate(45deg)
- Values for : Numbers + angle (deg)
-
You can set the center of rotation :
transform-origin
.box {
/* Define the center of rotation */
transform-origin: left bottom;
}
.box:hover {
/* Mouse hover rotation 45 degree */
transform: rotate(45deg);
}
Copy code
03. scale
-
scale(x,y)
Define element scaling- (x,y) Write numbers in it , Don 't write units , Numbers refer to multiples
- You can also set only one number
- Greater than 1 It's amplification , Less than 1 It's shrinking
- Default center point scaling , You can set the zoom center :
transform-origin
- You can also give X|Y Set zoom
【 Be careful 】
scale
Scaling does not affect the position of other boxes
.box:hover {
/* Define scaling , Double the width , High magnification 3 times */
transform: scale(2, 3);
}
Copy code
3、 ... and 、 Composite writing ( Simplify writing )
translate(X,Y)
Write together with other attributes , Put it first
div:hover{
transform:translate(100px) rotate(90deg) scale(1.2);
}
Copy code
CSS Of 3D transformation
One 、 Big concept
- Compared with 2D The conversion (X,Y) Plane axis ,3D One more conversion Z Axis , become (X,Y,Z) The three-dimensional axis of
Two 、 Small details
01. perspective
-
perspective
Used to define 3D Transform the perspective view of the element-
Define the distance from the observation point to the element , The smaller the value, the closer , Then the more obvious the later changes ( Big )—— Near and far away
Personal understanding , Default
perspective
Is equal to 0 Of , That is, the observation point is on the surface of the screen , The element is as big as it should beIf the distance is set , The observation point is away from the screen , Move towards people , This will create a situation of near large and far small
-
-
be necessary , Cannot be observed without setting 3D View
-
Defined in the parent element ( Or ancestral elements ), Acting on child elements ( Progeny element ) On
.father{ /* The default value is 0*/ perspective:500px; } Copy code
02. transform-style
-
Specify how elements are rendered in three-dimensional space
- 2D present :
transform-style:flat
- 3D present :
transform-style:preserve-3d
- 2D present :
-
Defined in the parent element ( Ancestral elements ) in
.father { /* Add perspective to the parent element */ perspective: 700px; /* 3D present , Let the child element be in 3D When rotating , keep 3D Three dimensional space */ transform-style: preserve-3d; } Copy code
03. transform-origin
transform-origin:X Y Z
Used to define 3D Center of rotationX Y Z
The default value is :50% 50% 0
- Settable value : length | percentage | Position NOUN
left | center | right
—— Horizontal value- The corresponding percentage is
left=0% | center=50% | right=100%
- The corresponding percentage is
top | center | bottom
—— Value in vertical direction- The corresponding percentage is
top=0% | center=50% | bottom=100%
- The corresponding percentage is
- Number of settable values : A value 、 Two values 、 Three values
(1) The case of a value
-
If you set the length value or percentage , Then for X The value of the shaft ,Y The axis is the default 50%
-
If you set a location NOUN , Then observe the direction of the noun
-
If it's horizontal :
left | right
, Then for X In the direction of the axis , that Y Value is the default :50% perhaps center ;- ( At this time, only non X Rotate the axis to see the effect )
-
If it's vertical :
top | bottom
, Then for Y In the direction of the axis , that X Value is the default :50% perhaps center ;- ( At this time, only non Y Rotate the axis to see the effect )
.son {
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
background-color: red;
transition: 1s;
transform-origin: left;
/* It's actually equivalent to transform-origin:0 50% 0;*/
/*transform-origin: right;*/
/* It's actually equivalent to transform-origin:100% 50% 0;*/
/*transform-origin: top;*/
/* It's actually equivalent to transform-origin:50% 0 0;*/
/*transform-origin: bottom;*/
/* It's actually equivalent to transform-origin:50% 100% 0;*/
}
.point {
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
background-color: #00f;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.son:hover {
/* transform: rotateX(45deg); */
transform: rotateY(45deg);
/* transform: rotateZ(45deg); */
}
Copy code
(2) The case of three values
- In the case of three values , Third values
Z
Can only be length values
04. translate
translate3d(x,y,z)
Definition 3D Mobile conversion- It can be set separately :
translateX(100px);
translateY(100px);
translateZ(100px);
- 【 Be careful 】 This property value can only be a length value , The other two can be Length value | percentage
- It can be set separately :
.father {
/* Add perspective to the parent element */
perspective: 700px;
/* 3D present , Let the child element be in 3D When rotating , keep 3D Three dimensional space */
transform-style: preserve-3d;
}
.son {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: red;
transition: 1s;
}
.son:hover {
/* And then use translate Define where the element is moved */
transform: translate3d(50px, 50px, 200px);
}
Copy code
It has a bigger effect , This is because of the movement Z Axis position , Closer to the screen or observation point , Then the element becomes larger in the sense
05. rotate
rotate3d(x,y,z,angle)
Define the element 3D rotate(x,y,z)
It's a 0 To 1 Value between , It is mainly used to describe the elements around X The vector value of the axis rotation .(angle)
It's an angle value , Specified in the 3D Space rotation angle , Positive clockwise rotation , On the contrary, when the element is inverse .
- Set separately :
rotataX(angle)
rotataY(angle)
rotataZ(angle)
.son:hover {
/* And then use rotate Defines the rotation angle of the element */
/* transform: rotate3d(1, 1, 1, 45deg); */
/* transform: rotateX(45deg); */
/* transform: rotateY(45deg); */
transform: rotateZ(45deg);
}
Copy code
06. scale
-
scale3d(x,y,z)
Definition 3D Scaling transformation -
Set separately :
-
scaleX()
-
scaleY()
-
scaleZ()
-
.son:hover {
/* And then use scale Defines the element scaling factor */
/* transform: scale3d(1,1,1); */
transform: scaleX(1.5);
/* transform: scaleY(1.5); */
/* transform: scaleZ(1.5); */
/* 【 notes 】 here scaleZ(1.5) There is no effect , Because it is Z Enlarged in the axial direction , and Z The length on the shaft is 0, So I can't see the effect */
}
Copy code
3、 ... and 、 Other
-
Set up
transform
Don't write separately , The style will be overwrittenThat is, it is wrong
div{ trandform:translateX(50%); transform:rotate(45deg); } Copy code
-
When rotating, pay attention to the position of the rotation center
CSS Animation implementation of
One 、 Create animation
-
Use
@keyframes
—— Keyframes , Create animation .use from Define start state , use to Define the end state
@keyframes move{ from { transform:translate(0,0); } to{ transform:translate(100px,100px); } } Copy code
Or define it as a percentage ,0% Define the starting state ,100% Define the end state , Other states can be added in the middle
@keyframes move{ 0%{ transform:translate(0,0); } 50%{ transform:translate(0,100px); 100%{ transform:translate(100px,100px); } } Copy code
Two 、 Call animation
-
Bind the animation in the element selector where you want to generate the animation
-
At least Specify these two properties : The name of the animation 、 Animation duration
div{ animation-name:move; animation-duration:3s; /* Simplify writing */ animation:move 3s; /* compatible */ -webkit-animation:move 3s; } Copy code
(1) Attribute expansion
div{
/* Call animation */
animation-name: move;
/* Define transition time , Default 0s, Therefore, the transition time must be set */
animation-duration: 10s;
/* Animation motion curve , Default ease */
/* ease | linear | ease-in | ease-out | stpes(number)*/
animation-timing-function: ease;
/* Animation delay , Default 0s */
animation-delay: 1s;
/* Animation - repeat - frequency , Default 1 Time , Set up infinite Infinite times */
animation-iteration-count: infinite;
/* Whether to play in the opposite direction , Default noraml, Reverse play reverse, First positive and then negative alternate, Reverse first and then positive alternate-reverse*/
animation-direction: normal;
/* After the end of the State , Default backwards Return to the starting state , Stop at the end forwards */
animation-fill-mode: forwards;
/* Composite writing ( Simplify writing ) */
/* animation: The name of the animation The duration of the Motion curve When to start plays Whether it's reverse Animation start or end state */
/* The above can be written as : */
animation: move 10s ease 1s infinite normal forwards;
}
div:hover {
/* Animation running state , Default running function , The mouse passes and stops the animation paused */
animation-play-state: paused;
}
Copy code
I like chicken with vegetables , If not, please forgive me
copyright notice
author[Ruovan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826004714394q.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich