transition
There is a transition property in the CSS, which allows you to monitor changes in a CSS property and perform simple animations using the transition property:
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. — quoted from MDN
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: # 000;
border-radius: 4px;
/* Use Transition to listen for CSS properties to animate */
transition: background 1s ease-in-out 0.2 s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: # 000;
background: #fff;
}
</style>
</head>
<body>
<div>
<div class="box">Hover the mouse to view the effect</div>
</div>
</body>
</html>
Copy the codeClick here to see the animation effect
Having experienced it, now let’s talk about how to use it:
transition: transition-property | transition-duration |
transition-timing-function | transition-delay;
Copy the codeI don’t think you’ll understand it, but let’s break it down one by one:
transition-property: background; /* Any CSS properties you need to listen for changes */
transition-duration: 1s; /* Set the duration of the transition animation */
transition-timing-function: ease-in-out; /* Set the transition animation */
transition-delay: 0.2 s; /* Set the delay for triggering animation */
Copy the codeThe transition property is a combination of these four CSS properties.
The first and second properties are required to specify the properties that listen to which the transition animation needs to be added and to specify the animation duration.
The third and fourth attributes are optional and are used to set the effect and delay of the transition animation.
See MDN transition-timing-function for optional values.
The first property also has two special values: None: does not listen for any properties. All: listens for all properties and animates them.
When the third property is omitted, the second time item is automatically resolved as animation delay.
It’s still a little hard to understand, for example:
transition: background 1s ease-in-out 0.2 s;
Copy the codeThe above example is part of the previous code.
Listen for background changes and add a 1 second transition animation to it. The transition animation starts slowly and ends slowly, and starts execution after the property changes 0.2 seconds.
So this paragraph in the code above:
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: # 000;
border-radius: 4px;
/* Use Transition to listen for CSS properties to animate */
transition: background 1s ease-in-out 0.2 s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: # 000;
background: #fff;
}
Copy the codeThe transition attribute animates the background color width attribute. When the class=box attribute changes, it automatically animates the default or specified animation effect.
Let’s use it for some more advanced uses:
When implementing animations, you may need to use a common approach: overflow smokescreen.
Used to achieve something like Tab switching:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style>
.wrapper {
width: 100px;
height: 100px;
overflow: hidden;
}
#tabs {
display: flex;
width: 200px;
height: 100px;
transition: transform 0.3 s;
}
.tab-pane-1 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: red;
}
.tab-pane-2 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: yellow;
}
.transform {
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="tabs">
<div class="tab-pane-1">1</div>
<div class="tab-pane-2">2</div>
</div>
</div>
<button onclick="switchTabPane()">Switch the Tab</button>
<script>
function switchTabPane() {
var el = document.getElementById('tabs')
el.className = el.className ? ' ' : 'transform'
}
</script>
</body>
</html>
Copy the codeClick here to see the animation effect
To do this, simply set the container to Overflow: Hidden; Then listen for the transform property on the TAB inside the container and use transform: translateX() to move it in the X-axis.
You can also use transform: rotateZ(); Make it rotate on the browser plane, with the geometric center as the default point of rotation.
animation & keyframes
The usage of animation property is similar to that of transition. Let me explain it in detail.
Animation CSS properties are animation-name, animation-duration, animation-timing-function, animation-delay, animation-rotund-count, A shorthand property form for the animation-direction, animation-fill-mode, and animation-play-state properties.
First do a simple rotation effect to experience:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style>
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg); }}.rotate {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: red;
/* Animate the element for 10s */
animation: rotate 10s linear infinite;
}
.wrapper {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="rotate">rotating</div>
</div>
</body>
</html>
Copy the codeClick here to see the animation effect
This is a basic rotation animation that uses the CSS properties animation and KeyFrames commonly used for animation.
animation
Now let’s talk about the basics:
animation: animation-name | animation-duration | animation-timing-function |
animation-delay | animation-iteration-count | animation-direction |
animation-fill-mode | animation-play-state;
Copy the codeThis is certainly still do not understand, continue to open a disassembly to explain:
animation-name: rotate; /* Customize the keyframes name */
animation-duration: 10s; /* Set the duration of a single transition animation */
animation-timing-function: linear; /* Set a single transition animation */
animation-delay: 0s; /* Set the single transition animation delay */
animation-iteration-count: infinite; /* Set the transition animation to an infinite number of times */
animation-direction: normal; /* The direction of transition animation can be set for odd or even animation */
animation-fill-mode: none; /* Set the fill mode for the transition animation */
animation-play-state: running; /* Set the transition animation to run or stop */
Copy the codeMost of the properties are easy to understand, but only two may be a bit more difficult to understand.
Animation-direction and animation-fill-mode are two of the most difficult properties to understand.
/* * normal: run animation in the direction specified by keyframes * reverse: run animation in the direction specified by keyframes * alternate: * alternate-reverse: runs in the opposite direction of the animation direction set by keyframes before running in the forward direction */
animation-direction: normal | reverse | alternate | alternate-reverse;
/* * None: no fill mode is set. Default is to stay at the start and end of animations before animations start. * * forwards: stay at the last frame after animations end. * backwards: stay at the first frame before animations start. Stop at the first and last frame of the animation, respectively, before and after the animation begins and ends
animation-fill-mode: none | forwards | backwards | both;
Copy the codeThese two attributes are arguably the most difficult to understand, so if you want to see the effect of setting them, you can switch to MDN.
keyframes
This CSS property, as those of you who have done some simple animation know, is simply keyframes.
Set a keyframe for an animation and the CSS will automatically fill in its motion path.
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg); }}Copy the codeThis code creates two keyframes for the animation div tag, one for the animation start position and the other for the animation end position. CSS will automatically fill in the animation process (rotation 359 degrees).
You can not only set the start and end positions (0% can be replaced by the from keyword, 100% can be replaced by the TO keyword), but also insert key frames during the animation, such as 33%, 50%, 66%, etc. CSS will automatically fill the animation according to the style of the key frame.
Typically, keyframes are used in conjunction with an animation.
After talking about the usage of animation and keyframes, let’s look at an interview question from my 2020 intern recruitment:
Use CSS to move a block back and forth in an infinite loop.
There are actually two ways to do this, but the principle is the same. Instead of putting the HTML code, we will put the CSS part directly:
/ * * * /
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0); }}.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 1s linear infinite;
}
/*
* ②
*/
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px); }}.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 0.5 s linear infinite alternate;
}
Copy the code