Home > Article > Web Front-end > An article explaining common techniques for making animations with CSS (Collection)
An article explaining common techniques for making animations with CSS (Collection)
- 奋力向前forward
- 2021-09-16 09:29:142637browse
In the previous article "Advanced JS skills you deserve to know (Summary)", we learned about advanced JS skills. The following article will introduce you to the common techniques for making animations with CSS. Let’s see how to do them together.
transition
There is a transition property in CSS, which can monitor the change of a certain CSS property and pass the property change Control to achieve simple animation effects:
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function and transition-delay. ——Quoted from MDN
html code
<!DOCTYPE html>
<html>
<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;
/* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: #000;
background: #fff;
}
</style>
</head>
<body>
<div>
<div>鼠标悬浮查看效果</div>
</div>
</body>
</html>Animation effect click here to view the address https://codepen.io/wjq990112/pen/PoqEemX
After the experience, let’s talk about the usage in detail:
css code
transition: transition-property | transition-duration | transition-timing-function | transition-delay;
You may not be able to understand it if you write it like this, let’s dismantle it one by one:
css code
transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */ transition-duration: 1s; /* 设定过渡动画的时长 */ transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */ transition-delay: 0.2s; /* 设定触发动画的延迟 */
The transition attribute is composed of the above four CSS attributes.
The first and second attributes are required, used to specify the listening attributes that need to add transition animation and specify the animation duration.
The third and fourth properties are optional and are used to set the effect and delay of the transition animation.
The optional values of transition-timing-function are detailed in
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing- function
The first attribute also has 2 special values: none: do not listen to any attributes all: listen to all attributes and add transition animations to them.
When the third attribute is omitted, the second time item will automatically be parsed as animation effect delay.
It’s still a bit difficult to understand, let’s give an example:
css code
transition: background 1s ease-in-out 0.2s;
The above example is part of the previous code.
means to listen for changes in background and add a 1-second transition animation to it. The effect of the transition animation is to start slowly and end slowly, and it will only start executing after the attribute changes for 0.2 seconds.
Then this paragraph in the above code:
css code
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: #000;
border-radius: 4px;
/* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: #000;
background: #fff;
}The transition attributes in the code are background``color` `width adds a transition animation. When these three attributes of the class=box tag change, the default or specified animation effect will be automatically added to it.
Next we will use it for some advanced usage:
In the process of implementing animation, you may need to use a common method: overflow Blindfold.
Used to achieve some effects similar to Tab switching:
html code
<!DOCTYPE html>
<html>
<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.3s;
}
.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>
<div id="tabs">
<div>1</div>
<div>2</div>
</div>
</div>
<button onclick="switchTabPane()">切换Tab</button>
<script>
function switchTabPane() {
var el = document.getElementById('tabs')
el.className = el.className ? '' : 'transform'
}
</script>
</body>
</html>Animation effect Click here to view https:// codepen.io/wjq990112/pen/MWwrXWo
To achieve this effect, you only need to set the container to overflow: hidden;, and then set the tab in the container Listen to the transform attribute, use transform: translateX() to move it in the X axis direction, and you're done.
There are also some rotation effects that can be realized by using transform: rotateZ(); to rotate on the browser plane. The default is to rotate with the geometric center as the center point. The usage of
animation & keyframes
animation attributes is similar to transition. Let me introduce it in detail next.
animation CSS properties are animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play A shorthand attribute form for the -state attribute.
First make a simple rotation effect to experience:
html code
<!DOCTYPE html>
<html>
<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;
/* 为元素设定 10s 的旋转动画 */
animation: rotate 10s linear infinite;
}
.wrapper {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<div>旋转</div>
</div>
</body>
</html>Animation effect click here to view https:// codepen.io/wjq990112/pen/mdJXeqm
This is a basic rotation animation, using animation and keyframes two commonly used to make animations CSS properties.
animation
Now let’s talk about the basic usage:
css code
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode | animation-play-state;
I definitely still don’t understand it, so continue I will break it down and explain it to you one by one:
css code
animation-name: rotate; /* 自定义 keyframes 名 */ animation-duration: 10s; /* 设定单次过渡动画时长 */ animation-timing-function: linear; /* 设定单次过渡动画效果 */ animation-delay: 0s; /* 设定单次过渡动画延迟时间 */ animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */ animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */ animation-fill-mode: none; /* 设定过渡动画的填充模式 */ animation-play-state: running; /* 设定过渡动画运行或停止 */
I believe that most of the attributes are easy to understand, but only two attributes may be more difficult to understand.
animation-direction and animation-fill-mode should be said to be the two most difficult properties to understand. Let’s explain them in detail:
css code
/* * normal: 按照 keyframes 设定的动画方向运行 * reverse: 按照 keyframes 设定的动画方向的反方向运行 * alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行 * alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行 */ animation-direction: normal | reverse | alternate | alternate-reverse; /* * none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态 * forwards: 动画结束后停留在动画的最后一帧 * backwards: 动画开始前停留在动画的第一帧 * both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧 */ animation-fill-mode: none | forwards | backwards | both;
These two properties can be said to be the most difficult to understand. If you want to see the effect after setting, you can go to MDN.
keyframes
I believe students who have learned some simple animation production must understand this CSS property. It is very simple, it is key frames.
Set keyframes for an animation and CSS will automatically fill in its motion path.
css code
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg);
}
}上面这段代码，就是为设定了animation属性的div标签创建了两个关键帧，一个是动画起始位置的样式，另一个是动画结束位置的样式，CSS将自动填充动画的过程（即旋转 359 度）。
不仅仅可以设置开始和结束的位置（0%可以使用from关键字代替，100%可以使用to关键字代替），还可以在动画的运行过程中插入关键帧，例如33%，50%，66%等等，CSS会按照关键帧的样式，对动画进行自动填充。
通常情况下，keyframes会与animation配合使用。
讲完了animation和keyframes的用法，我们来看一道面试题，来自本人 2020 年某跳动实习生招聘一面：
请你使用 CSS 实现一个方块来回移动，无限循环。
这个题目其实有 2 种做法，但是原理都是一样的，这里就不放 HTML 代码了，直接放 CSS 的部分：
/*
* ①
*/
@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.5s linear infinite alternate;
}推荐学习：CSS视频教程
The above is the detailed content of An article explaining common techniques for making animations with CSS (Collection). For more information, please follow other related articles on the PHP Chinese website!
Related articles
See more- How to insert css style into html
- Teach you to use HTML, CSS and JS to create responsive filterable games (with code)
- Elementary article: How to make a cool black analog clock using html, css and js (with code)
- Teach you how to use HTML, CSS and JS to make a random password generator (share)
- Teach you step by step how to use CSS to create a realistic water ripple effect (with code)