Dalam artikel sebelumnya "Kemahiran JS lanjutan yang anda patut ketahui (Ringkasan) ", kami belajar tentang kemahiran JS lanjutan. Artikel berikut akan memperkenalkan anda kepada teknik biasa untuk membuat animasi dengan CSS Mari lihat cara melakukannya bersama-sama.
Terdapat atribut transition dalam CSS, yang boleh memantau perubahan atribut CSS tertentu melalui kawalan perubahan atribut, Kesan animasi ringkas:
Sifat CSS peralihan ialah sifat trengkas untuk sifat peralihan, tempoh peralihan, fungsi pemasaan peralihan dan kelewatan peralihan. ——Dipetik daripada MDN
kod html
<!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>kesan animasi klik di sini untuk melihat alamat https://codepen.io/wjq990112/pen / PoqEemX
Setelah mengalaminya, mari kita bincangkan tentang penggunaan secara terperinci:
kod css
transition: transition-property | transition-duration | transition-timing-function | transition-delay;
Anda mungkin tidak dapat memahaminya jika anda tulis seperti ini, kami akan membongkarnya satu demi satu Penyelesaian:
kod css
transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */ transition-duration: 1s; /* 设定过渡动画的时长 */ transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */ transition-delay: 0.2s; /* 设定触发动画的延迟 */
dan atribut transition terdiri daripada 4 atribut CSS di atas.
Atribut pertama dan kedua diperlukan dan digunakan untuk menentukan atribut mendengar yang perlu menambah animasi peralihan dan menentukan tempoh animasi.
Atribut ketiga dan keempat adalah pilihan dan digunakan untuk menetapkan kesan dan kelewatan animasi peralihan.
Untuk butiran tentang nilai pilihan fungsi pemasaan peralihan, lihat
https://developer.mozilla.org/zh-CN/docs/Web/CSS /transition-timing- function
Atribut pertama juga mempunyai 2 nilai istimewa: tiada: jangan dengar sebarang atribut semua: dengar semua atribut dan tambah animasi peralihan padanya.
Apabila atribut ketiga diabaikan, item kali kedua akan dihuraikan secara automatik sebagai kelewatan kesan animasi.
Ia masih agak sukar untuk difahami, mari kita berikan contoh:
kod css
Contoh di atas adalah sebahagian daripada kod sebelumnya. bermaksud mendengar perubahan dalamperalihan: latar belakang 1s mudah-masuk-keluar 0.2s; >
dan menambah animasi peralihan 1 saat padanya Kesan animasi peralihan ialah ia bermula perlahan dan berakhir dengan perlahan, dan mula melaksanakan selepas atribut berubah selama 0.2. detik. background
.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;
} dalam kod menambah animasi peralihan kepada transition masing-masing ketiga-tiga atribut teg background``color``width ini berubah, kesan animasi lalai atau yang ditentukan akan ditambahkan secara automatik padanya. class=box
Kaedah penutup mata. overflow
penukaran: Tab
<!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>kesan animasi klik di sini untuk melihat https://codepen . io/wjq990112/pen/MWwrXWoUntuk mencapai kesan ini, anda hanya perlu menetapkan bekas kepada
;, dan kemudian gunakan overflow: hidden untuk menggunakan tabmendengartransform atribut dalam bekas Gerakkannya ke arah paksi transform: translateX() dan anda selesai. X
untuk berputar pada satah penyemak imbas Secara lalai adalah untuk berputar dengan pusat geometri sebagai titik tengah. Penggunaan atribut transform: rotateZ();
adalah serupa dengan animation Biar saya memperkenalkannya secara terperinci seterusnya. transition
Sifat CSS animasi ialah nama animasi, tempoh animasi, fungsi pemasaan animasi, kelewatan animasi, kiraan lelaran animasi, arah animasi, mod isian animasi dan animasi- mainkan Borang atribut singkatan untuk atribut -state.Mula-mula cuba kesan putaran mudah: kod html
<!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>Klik di sini untuk melihat kesan animasi https: // codepen.io/wjq990112/pen/mdJXeqmIni ialah animasi putaran asas, menggunakan
dan animation dua sifat CSS yang biasa digunakan untuk animasi. keyframes
animasi
Sekarang mari kita bercakap tentang penggunaan asas: kod cssanimation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode | animation-play-state;
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; /* 设定过渡动画运行或停止 */
dan animation-direction boleh dikatakan sebagai dua atribut yang paling sukar untuk difahami: animation-fill-mode
/* * 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;
. MDN
keyframes
Properti CSS ini, saya percaya pelajar yang telah mempelajari beberapa penghasilan animasi mudah mesti faham bahawa ia sangat mudah, ia adalah keyframe. Tetapkan bingkai utama untuk animasi dan CSS akan mengisi laluan gerakannya secara automatik. kod css@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视频教程
Atas ialah kandungan terperinci Artikel yang menerangkan teknik biasa untuk membuat animasi dengan CSS (Koleksi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
