CSS로 애니메이션을 만드는 일반적인 기술을 설명하는 문서(컬렉션)
이전 글 "당신이 알아야 할 고급 JS 스킬(요약)"에서 고급 JS 스킬에 대해 알아보았습니다. 다음 기사에서는 CSS를 사용하여 애니메이션을 만드는 일반적인 기술을 소개합니다.
transition
CSS에는 transition 속성이 있습니다. 이 속성은 특정 CSS 속성의 변경 사항을 모니터링하고 속성 변경 제어를 통해 간단한 애니메이션 효과를 얻을 수 있습니다. transition属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现简单的动画效果：
transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 —— 引用自 MDN
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>动画效果点击此处查看 地址https://codepen.io/wjq990112/pen/PoqEemX
体验完了，现在来具体讲一下用法：
css代码
transition: transition-property | transition-duration | transition-timing-function | transition-delay;
这样写你们估计看不懂，我们一条一条来拆解：
css代码
transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */ transition-duration: 1s; /* 设定过渡动画的时长 */ transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */ transition-delay: 0.2s; /* 设定触发动画的延迟 */
而transition属性就是由上面的 4 条 CSS 属性组合而成。
第一第二个属性是必须项，用于指定侦听需要添加过渡动画的属性以及指定动画时长。
第三第四个属性为可选项，用于设定过渡动画的效果和延迟。
transition-timing-function的可选值详见
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
第一个属性还有 2 个特殊值：none：不对任何属性进行侦听 all：对所有属性进行侦听并为其添加过渡动画。
当省略第三个属性时，第二个时间项会被自动解析为动画效果延迟。
干说还是有点难理解，举个栗子吧：
css代码
transition: background 1s ease-in-out 0.2s;
上面这个例子，就是前面的代码中的一部分。
意思是侦听background的变化，为其添加 1 秒的过渡动画，过渡动画的效果是慢开始慢结束，并在属性变化 0.2 秒后才开始执行。
那么上面代码中的这一段：
css代码
.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;
}代码中的transition属性分别为background``color``width加上了过渡动画，当class=box的标签的这三个属性发生变化时，就回自动为其加上默认或指定的动画效果。
接下来我们就用它来做一些进阶的用法：
在实现动画的过程中，可能会需要使用一种常用的方式：overflow障眼法。
用于实现一些类似Tab切换的效果：
html代码
<!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>动画效果点击此处查看https://codepen.io/wjq990112/pen/MWwrXWo
实现这个效果只需要将容器设置为overflow: hidden;，然后对容器内的tab侦听transform属性，使用transform: translateX()使其在 X轴方向移动，大功告成了。
还有一些旋转效果也可以使用transform: rotateZ();使其在浏览器平面上旋转实现，默认是以几何中心为中心点进行旋转。
animation & keyframes
animation属性的用法和transition比较相似，接下来由我来详细介绍一下。
animation CSS 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
先做个简单的旋转效果体验一下：
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>动画效果点击此处查看https://codepen.io/wjq990112/pen/mdJXeqm
这是一个基础的旋转动画，用到了animation和keyframes两个常用于制作动画的 CSS 属性。
animation
现在我们来讲一下基础用法：
css代码
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode | animation-play-state;
这样讲肯定还是不懂，继续一条一条拆解开给大家讲解：
css代码
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; /* 设定过渡动画运行或停止 */
相信大部分属性都很好理解，只有两个属性可能会比较难理解。
animation-direction和animation-fill-mode应该可以说是最难理解的两个属性了，我们再详细讲解一下：
css代码
/* * 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
transition CSS property 전환 속성, 전환 기간, 전환 타이밍 기능 및 전환 지연에 대한 약식 속성입니다. ——MDN
html 코드에서 인용@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg);
}
}애니메이션 효과 주소를 보려면 여기를 클릭하세요 https://codepen.io/wjq990112/pen/PoqEemX
경험한 후 이제 사용법 자세히 :🎜🎜css code🎜/*
* ①
*/
@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;
}🎜rrreee🎜
전환 속성은 위 4가지 항목과 CSS 속성의 조합으로 구성됩니다. 🎜🎜첫 번째와 두 번째 속성은 필수이며 전환 애니메이션을 추가하고 애니메이션 지속 시간을 지정하는 데 필요한 청취 속성을 지정하는 데 사용됩니다. 🎜🎜세 번째 및 네 번째 속성은 선택 사항이며 전환 애니메이션의 효과 및 지연을 설정하는 데 사용됩니다. 🎜🎜🎜transition-timing-function의 선택적 값은 🎜🎜https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function🎜🎜🎜에 자세히 설명되어 있습니다. 첫 번째 속성은 2개의 특수 값이기도 합니다. 없음: 어떤 속성도 듣지 않습니다. all: 모든 속성을 듣고 전환 애니메이션을 추가합니다. 🎜🎜세 번째 속성이 생략되면 두 번째 항목이 자동으로 애니메이션 효과 지연으로 구문 분석됩니다. 🎜🎜아직 이해하기 어렵습니다. 예를 들어 보겠습니다. 🎜🎜css code🎜🎜🎜transition: background 1seasy-in-out 0.2s; 🎜🎜🎜위의 예는 이전 코드 부분. 🎜🎜
백그라운드의 변경 사항을 듣고 1초 전환 애니메이션을 추가한다는 의미입니다. 전환 애니메이션의 효과는 천천히 시작하고 천천히 끝나는 것이며, 실행이 시작될 때까지는 실행되지 않습니다. 0.2초 동안 속성이 변경됩니다. 🎜🎜그런 다음 위 코드의 이 섹션: 🎜🎜css code🎜rrreee🎜코드의 transition 속성은 전환 애니메이션을 background``color``width 에 추가합니다. class=box 태그의 세 가지 속성이 변경되면 기본 또는 지정된 애니메이션 효과가 자동으로 추가됩니다. 🎜🎜다음으로 고급 용도로 사용하겠습니다. 🎜🎜애니메이션을 구현하는 과정에서 일반적인 방법인 overflow 블라인드 방법을 사용해야 할 수도 있습니다. 🎜🎜탭 전환과 유사한 효과를 얻는 데 사용됩니다. 🎜🎜html code🎜rrreee🎜🎜애니메이션 효과를 보려면 여기를 클릭하세요. https://codepen.io/wjq990112/pen/MWwrXWo🎜🎜🎜 구현 이 효과를 얻으려면 컨테이너를 overflow:hidden;으로 설정한 다음 탭의 transform 속성을 수신하기만 하면 됩니다. 컨테이너를 삭제하고 transform:transformX()를 사용하여 X축 방향으로 이동하면 작업이 완료됩니다. 🎜🎜브라우저 평면에서 회전하기 위해 transform:rotateZ();를 사용하여 실현할 수 있는 몇 가지 회전 효과도 있습니다. 기본값은 기하학적 중심을 중심점으로 회전하는 것입니다. 🎜🎜animation & keyframes🎜🎜 animation 속성의 사용법은 transition과 유사합니다. 🎜🎜🎜애니메이션 CSS 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode 및 animation-play-의 약어입니다. 상태 속성 속성 형태. 🎜🎜🎜먼저 경험해 볼 수 있는 간단한 회전 효과 만들기: 🎜🎜html 코드🎜rrreee🎜🎜애니메이션 효과를 보려면 여기를 클릭하세요 https://codepen.io/wjq990112/pen/mdJXeqm🎜🎜🎜이것은 기본입니다 회전 애니메이션은 애니메이션을 만드는 데 일반적으로 사용되는 두 가지 CSS 속성인
animation 및 keyframes을 사용합니다. ㅋㅋㅋ CSS code🎜rrreee🎜저는 대부분의 속성을 믿습니다. 모두 이해하기 쉽지만, 더 이해하기 어려울 수 있는 속성은 두 가지뿐입니다. 🎜🎜animation-direction 및 animation-fill-mode는 가장 이해하기 어려운 두 가지 속성이라고 할 수 있습니다. 자세히 설명하겠습니다. 🎜🎜css code🎜rrreee 🎜이 두 가지 속성은 가장 이해하기 어렵다고 할 수 있습니다. 설정 후 효과를 보려면 MDN으로 전환하면 됩니다. 🎜🎜🎜keyframes🎜🎜🎜이 CSS 속성은 간단한 애니메이션 제작을 배운 학생들이 반드시 이해해야 한다고 믿습니다. 매우 간단하며 키프레임입니다. 🎜🎜애니메이션의 키프레임을 설정하면 CSS가 모션 경로를 자동으로 채웁니다. 🎜🎜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视频教程
위 내용은 CSS로 애니메이션을 만드는 일반적인 기술을 설명하는 문서(컬렉션)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7531
15
1379
52
82
11
55
19
21
78
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
부트 스트랩 날짜를 보는 방법
Apr 07, 2025 pm 03:03 PM
답 : 부트 스트랩의 날짜 선택기 구성 요소를 사용하여 페이지에서 날짜를 볼 수 있습니다. 단계 : 부트 스트랩 프레임 워크를 소개하십시오. HTML에서 날짜 선택기 입력 상자를 만듭니다. 부트 스트랩은 선택기에 스타일을 자동으로 추가합니다. JavaScript를 사용하여 선택한 날짜를 얻으십시오.
