CSS를 애니메이션으로 빠르게 배울 수 있는 글!
- 青灯夜游앞으로
- 2021-12-29 11:04:281571검색
이 글은 애니메이션 효과를 얻는 방법과 애니메이션을 통해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!