CSS를 애니메이션으로 빠르게 배울 수 있는 글!
이 글은 애니메이션 효과를 얻는 방법과 애니메이션을 통해 CSS를 빠르게 배우는 방법에 대한 심층 분석을 제공할 것입니다. 모두에게 도움이 되기를 바랍니다!
비즈니스에서 프런트엔드에 대한 요구가 점점 더 많아지면서 프런트엔드의 세 가지 마법 무기 중 하나인 CSS가 점점 더 복잡해지고 있습니다. 이는 초보 학생들에게 어느 정도의 압박감을 줍니다. CSS는 특정 속성까지 그다지 복잡하지 않습니다. 가장 큰 문제는 지식 포인트가 많다는 것입니다. 드디어 주요 지식 포인트를 익힌 뒤 인터넷에 떠도는 질문을 보거나 고수들이 쓴 CSS 책을 읽으며 새로운 바다에 빠져들었다.
사실 인간의 뇌는 흩어져 있는 지식 포인트를 잘 기억하지 못하지만, 이러한 지식 포인트를 연결할 수 있는 논리적 선이 있다면 뇌의 기억과 검색을 크게 촉진할 수 있습니다. 단서는 논리적이어야 하며 가급적이면 흥미로워야 합니다.
CSS 애니메이션은 정말 흥미로운 단서입니다. 애니메이션의 변화에서 CSS 속성을 이해할 수 있습니다.
예를 들어, CSS가 둥근 직사각형의 border-radius 속성을 추가한다는 것을 알고 있는데, 다양한 크기의 둥근 모서리를 설정하면 어떤 효과가 있을까요? 실험을 위해 크기를 계속 변경하는 대신 한 눈에 알아볼 수 있도록 애니메이션을 만들어 보겠습니다.
움직이고 변형되도록 할 수도 있습니다.
원을 그리며 회전하게 할 수도 있습니다. :
CSS 애니메이션의 빠른 이해
다른 속성을 결합하기 전에 먼저 애니메이션을 이해해 봅시다.
애니메이션의 핵심 키워드는 '움직임'입니다. 우리는 몇 가지 질문에 답하고 싶습니다:
- 무엇: 움직이는 것이 무엇인가요?
- 장소: 어디로 이동할까요?
- 언제: 언제 이사할까요? 이동하는 데 얼마나 걸리나요?
- 방법: 어떻게 이동하나요?
- 횟수: 몇 번인가요?
이 질문의 결과가 애니메이션의 구성 요소를 구성합니다.
먼저 움직이는 피사체가 무엇인가요? 이는 HTML 태그 또는 태그로 구성된 복잡한 구성 요소입니다. 우리에게 가장 중요한 것은
전환 애니메이션
먼저 전환이라는 간단한 CSS 속성 애니메이션을 배워보겠습니다. 위의 4가지 속성으로 구성됩니다.
- transition-property: 변경할 CSS 속성 값 지정
- transition-duration: 애니메이션 지속 시간
- transition-timing-function: 애니메이션 속도
- transition-delay : 애니메이션 시작 지연 시간
예를 살펴보겠습니다.
#hellocss {
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 1s;
}이 애니메이션 지정은 너비 너비가 변경되면 1초 지연하여 너비 변경 애니메이션을 5초 동안 실행한다는 의미입니다. 변화율은 일정합니다.
명확하게 보기 위해 초기 너비와 배경색, 전경색을 설정했습니다.
<style>
#hellocss {
background-color: blue;
color: yellow;
width: 20px;
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 1s;
}
</style>애니메이션이므로 변경사항이 있어야 합니다. 따라서 우리는
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.width = "100px";
}
</script>라는 두 문장을 작성한 다음 이 변경을 트리거하는 이벤트를 찾습니다. 예를 들어 페이지가 로드될 때 수행합니다.
Hello,HTML
Hello,CSS
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.width = "100px";
}
</script>
전체 코드는 다음과 같습니다.
<style>
#hellocss {
background-color: blue;
color: yellow;
width: 20px;
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay: 1s;
}
</style>
Hello,HTML
Hello,CSS
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.width = "100px";
}
</script>
After 4가지 속성은 하나로 축약됩니다:
transition: width 5s linear 1s;
지연이 없으면 네 번째 항목을 작성할 필요가 없습니다. 느린 속도, 빠른 속도의 용이성 방법을 채택하는 경우 3번 항목도 생략할 수 있습니다. 첫 번째 항목이 변경될 경우 전체로 작성할 수 있습니다. 하지만 두 번째 애니메이션 기간은 반드시 작성해야 합니다. 작성하지 않으면 기본값은 0초이며 아무 것도 없습니다.
선형적으로 계산할 수 있는 모든 속성은 애니메이션에 사용할 수 있습니다. 너비, 높이, 위치 등 이해하기 쉬운 좌표 속성 외에도 색상 속성도 애니메이션이 좋은 장면에서 자주 사용됩니다. 파란색 배경의 노란색 텍스트에서 흰색 배경의 검정색 텍스트로의 애니메이션 프로세스를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#hellocss {
background-color: blue;
color: yellow;
transition: all 10s linear 1s;
}
</style>
</head>
<body onload="trans1()">
<div>Hello,HTML</div>
<div id="hellocss">Hello,CSS</div>
<script>
function trans1(){
let hcss1 = document.getElementById("hellocss");
hcss1.style.backgroundColor = "white";
hcss1.style.color="red";
}
</script>
</body>
</html>keyframes animation
위의 전환은 비교적 간단합니다. 예를 들어, 여러 번 반복하거나 변경해야 한다면 과거에 다시 변경해야 하거나 중간에 여러 번 변경해야 한다면 더 많은 속성을 지정해야 합니다. 이러한 요구 사항은 키프레임 애니메이션으로 충족됩니다.
키프레임 애니메이션의 장점은 시작점과 끝점이 키프레임에 지정된다는 것입니다. 이를 변경하기 위해 이벤트를 작성할 필요가 없습니다.
@keyframes color_change{
from {
background-color: blue;
color: yellow;
}
to {
background-color: white;
color: black;
}
}然后我们在一个css选择器里面去引用定义好的keyframes动画，同时指定动画时长、变化曲线和延时：
#hellocss {
animation-name: color_change;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 1s;
}到了keyframes动画，我们终于可以指定播放多少次了，比如连播三次：
#hellocss {
animation-name: color_change;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 3;
}甚至可以无限性地播放下去:
animation-iteration-count: infinite;
光循环播还不过瘾，我们还想先正着变，然后再变回来，我们可以将方向设为交替播放：
animation-direction: alternate;
把上面的综合在一起，大家跑起来看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
@keyframes color_change {
from {
background-color: blue;
color: yellow;
}
to {
background-color: white;
color: black;
}
}
#hellocss {
animation-name: color_change;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div>Hello,HTML</div>
<div id="hellocss">Hello,CSS</div>
</body>
</html>而其实呢，from和to，分别是0%和100%的别名，也可以这么写：
@keyframes color_change {
0% {
background-color: blue;
color: yellow;
}
100% {
background-color: white;
color: black;
}
}这样我们可以增加百分比，让变化变得更有趣一些:
@keyframes color_change {
0% {
background-color: blue;
color: yellow;
}
50% {
background-color: yellowgreen;
color: red;
}
100% {
background-color: white;
color: black;
}
}
最后，如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现，比如我们让点击第一个div来实现暂停功能：
<body>
<div onclick="trans1()">Hello,HTML</div>
<div id="hellocss">Hello,CSS</div>
<script>
function trans1() {
let hcss1 = document.getElementById("hellocss");
hcss1.style.animationPlayState = "paused";
}
</script>
</body>通过动画形象理解css属性
变形 - 圆角矩形
我们现在终于可以看看开篇时的第一个动画是如何写成的了：
@keyframes color_change {
0% {
background-color: blue;
color: yellow;
border-radius: 0px;
}
50% {
background-color: yellowgreen;
color: red;
}
100% {
background-color: palegoldenrod;
color: black;
border-radius: 100px;
}
}平面移动：transform:translate属性
最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画：
我们先让变色的圆角矩形向下移100px，然后再右移100px:
0% {
background-color: blue;
color: yellow;
border-radius: 0px;
transform:translate(0px,0px)
}
50% {
background-color: yellowgreen;
color: red;
transform:translate(0px,100px)
}
100% {
background-color: palegoldenrod;
color: black;
border-radius: 100px;
transform:translate(100px,100px)
}
}旋转：transform:rotate属性
最后我们看旋转属性。
@keyframes color_change{
0% {
background-color: blue;
color: yellow;
border-radius: 0px;
transform:translate(0px,0px);
transform:rotate(0deg);
}
50% {
background-color: yellowgreen;
color: red;
transform:translate(0px,100px);
transform:rotate(90deg);
}
100% {
background-color: palegoldenrod;
color: black;
border-radius: 100px;
transform:translate(100px,100px);
transform:rotate(180deg);
}
}通过动画学习盒子模型
让我们回归基础，通过动画来了解盒子模型。
所谓盒子，最基础的就是宽和高。 这没啥可说的，来个宽高动画先体验一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
@keyframes box_change {
0% {
height: 50px;
width: 50px;
}
50% {
height: 200px;
width: 50px;
}
100% {
height: 200px;
width: 200px;
}
}
.box1 {
background-color: blue;
color: yellow;
opacity: 0.65;
animation-name: box_change;
animation-duration: 10s;
animation-delay: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="box1">Hello Box</div>
</body>
</html>
除了宽高之外，盒子有边框，边框内部有padding，边框外面还有margin。
包括边框在内，都分为top, bottom, left, right四个方向：
border-width: 5px;
border-top-color: #f5222d;
border-bottom-color: #cf1322;
border-left-color: #a8071a;
border-right-color: #820014;
padding: 10px;
margin: 15px;我们现在给边框加上颜色和形状，带着margin和padding动起来看看效果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
@keyframes box_change {
0% {
height: 50px;
width: 50px;
border-style: solid;
}
50% {
height: 200px;
width: 50px;
border-style: dotted;
}
100% {
height: 200px;
width: 200px;
border-style: dashed;
}
}
.box1 {
background-color: blue;
color: yellow;
border-width: 5px;
border-top-color: #f5222d;
border-bottom-color: #cf1322;
border-left-color: #a8071a;
border-right-color: #820014;
padding: 10px;
margin: 15px;
animation-name: box_change;
animation-duration: 10s;
animation-delay: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="box1">Hello Box</div>
</body>
</html>打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：
Border取5px只是为了让其更容易被识别，但是太丑了，我们将其改为2px。效果就好得多了：
（学习视频分享：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)
뜨거운 주제
7467
15
1376
52
77
11
46
19
18
20
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
부트 스트랩 날짜를 보는 방법
Apr 07, 2025 pm 03:03 PM
답 : 부트 스트랩의 날짜 선택기 구성 요소를 사용하여 페이지에서 날짜를 볼 수 있습니다. 단계 : 부트 스트랩 프레임 워크를 소개하십시오. HTML에서 날짜 선택기 입력 상자를 만듭니다. 부트 스트랩은 선택기에 스타일을 자동으로 추가합니다. JavaScript를 사용하여 선택한 날짜를 얻으십시오.
부트 스트랩 날짜를 확인하는 방법
Apr 07, 2025 pm 03:06 PM
부트 스트랩의 날짜를 확인하려면 다음 단계를 따르십시오. 필요한 스크립트와 스타일을 소개하십시오. 날짜 선택기 구성 요소를 초기화합니다. 검증을 활성화하려면 데이터 BV 날짜 속성을 설정합니다. 검증 규칙 (예 : 날짜 형식, 오류 메시지 등) 구성; 부트 스트랩 검증 프레임 워크를 통합하고 양식이 제출 된 경우 날짜 입력을 자동으로 확인하십시오.
부트 스트랩 내비게이션 바를 설정하는 방법
Apr 07, 2025 pm 01:51 PM
Bootstrap은 내비게이션 막대 설정을위한 간단한 안내서를 제공합니다. 내비게이션 바 컨테이너 추가 브랜드 아이덴티티 추가 내비게이션 링크 추가 (선택 사항) 스타일 조정 스타일 (선택 사항)
