애니메이션 CSS 코드: HTML 및 CSS를 사용하여 판다 애니메이션 만들기
CSS를 사용하여 멋진 애니메이션을 만들 수 있습니다.이 강좌에서는 HTML 및 CSS만 사용하여 키프레임 애니메이션을 만듭니다.웹 개발 기술을 새로운 수준으로 향상시키십시오.이 글은 Pratik Shukla가 작성했습니다.
CSS를 사용하면 JavaScript를 사용하지 않고 HTML 요소의 멋진 애니메이션을 만들 수 있습니다.내장된
@keyframeat 규칙을 사용할 수 있습니다. 이 규칙은 각 키프레임의 스타일을 정의하여 애니메이션 시퀀스의 단계를 제어합니다.키프레임을 사용하려면
@keyframes 규칙을 만들고 이름을 지정해야 합니다.그런 다음 이 이름을 속성으로 사용하여 애니메이션을 키프레임 선언과 일치시킵니다.이 강좌에서 CSS 애니메이션을 소개하고 HTML과 CSS만 사용하여 키프레임 판다 애니메이션을 만듭니다.
오늘 소개할 내용은 다음과 같습니다.
CSS 애니메이션 기반
CSS에서 애니메이션을 사용하면 요소의 스타일을 점차 변경할 수 있습니다.먼저 애니메이션의 키프레임을 지정합니다.키프레임은 주어진 시간에 각 요소가 가지고 있는 스타일을 저장하는 키프레임입니다.
@keyframes 규칙을 사용하여 CSS 스타일을 지정하면 애니메이션이 점차 새 스타일로 변경됩니다.우리는 우선 필요한 애니메이션을 요소에 연결해야 한다.예를 들어
animation 요소를 <div> 요소로 결합하여 배경색을 빨간색에서 노란색으로 변경할 수 있습니다.이 애니메이션은 3초 동안 지속됩니다./* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 3s;
}
animation-duration 속성은 애니메이션 완성에 필요한 시간을 정의합니다.기본값은 0초이므로 이 속성을 지정하지 않으면 애니메이션이 발생하지 않습니다.또한 CSS 애니메이션을 만들 때 백분율을 사용할 수도 있습니다.이것은 더 많은 스타일 변경을 사용할 수 있도록 합니다.다음 예제에서는 애니메이션이 30%, 50% 및 100%를 완료하면
<div> 요소의 배경색이 변경됩니다./* The animation code */
@keyframes example {
0% {background-color: red;}
30% {background-color: orange;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
CSS 애니메이션의 속성
이제 우리는 CSS 속성이 키 프레임at 규칙과 어떻게 작동하는지 기본적인 지식을 이해했고 애니메이션에 응용하여 더 많은 기능의 주요 속성을 얻을 수 있는지 토론했다.
animation-name: 애니메이션 이름 확인div {
animation-name: panda;
}
animation-delay: 이 속성은 애니메이션의 시작 생성 지연입니다.animation-delay: 5s;
animation-iteration-count: 이 속성 정의 애니메이션이 실행될 횟수animation-iteration-count: 4;
animation-timing-function: 이 속성은 다음과 같은 속도 커브를 정의합니다.linear: 처음부터 끝까지 동일한 ease: 천천히 시작하고 빠르게, 천천히 끝내기 ease-in: 저속 시동 ease-out: 완속 animation-direction: 이 속성은 애니메이션이 앞으로 재생될지 뒤로 재생될지 결정합니다animation-direction: reverse;
animation-fill-mode: 이 속성은 애니메이션을 재생하지 않을 때 대상 요소의 스타일을 결정합니다.이것이 바로 우리가 CSS 규칙을 덮어쓰는 방식입니다. 즉, 첫 번째 키프레임을 재생하기 전에 애니메이션은 요소를 바꾸지 않습니다.none: forwards: 요소는 마지막 키프레임 backwards: 요소는 첫 번째 키프레임 both: 애니메이션이 두 방향(앞과 뒤)으로 애니메이션 속성 확장 판다 애니메이션 개요
이제 배운 CSS 애니메이션을 적용하고 CSS와 HTML만 사용하여 처음부터 자신만의 애니메이션을 만듭니다.우리는 판다가 들판을 가로지르는 간단한 애니메이션을 만들 것이다.선택한 경우 애니메이션에 음악을 포함할 수도 있습니다.아래의 최종 제품을 보십시오.
애니메이션을 만드는 데 필요한 내용은 다음과 같습니다.
1) 텍스트 편집기
2) 애니메이션용 엘프 도면 파일
3) 선택한 오디오 파일
4) 당신의 HTML과 CSS 기술
애니메이션을 만들기 위해 엘프시계를 사용합니다.sprite 작업표는 비트맵 이미지 파일로 격자를 평평하게 펴는 형식으로 몇 개의 작은 도형을 포함한다.우리가 이 애니메이션에 사용할 정령표를 보세요.
이곳에서 우리는 12개의 다른 판다 그림을 볼 수 있다.일단 우리가 그들을 한데 모아 애니메이션으로 삼는다면, 우리는 판다 애니메이션을 만들 것이다.이를 위해
Moving_Panda.html과 Moving_Panda.css의 두 파일을 만들 것입니다.I’ve added all the required files here for you to download.
You can also view and download code from GitHub.
HTML 코드 작성
HTML 섹션부터 시작하겠습니다.기억하십시오: HTML 코드는 CSS 애니메이션에서 이동 효과를 만들기 위해 변경되는 코드입니다.HTML 파일에 CSS 코드를 추가할 수 있지만, 깔끔하게 하기 위해 두 개의 다른 파일을 만들 것입니다.
각 부분에 대한 상세한 설명을 얻기 위해 아래의 코드를 읽고 계속 읽어 주십시오.
<html>
<head>
<title>Panda Walking Animation</title>
<link rel="stylesheet" href = "Moving_Panda.css">
</head>
<body>
<a href="#" onclick="play()">
<audio id="audio" src="https://git.io/JUW4q" loop="loop"></audio>
<script>
function play()
{
var audio = document.getElementById("audio");
audio.play();
}
</script>
<div id="panda"></div>
<div id="street"></div>
</a>
</body>
</html>
<html> 태그를 추가합니다.<head> 표시를 추가합니다. 이 표시는 메타데이터를 표시하는 데 사용됩니다. (웹 페이지에 대한 다른 특정한 정보는 사용자에게 표시되지 않습니다.)여기서 우리는 html 파일에 <title>을 설정할 것입니다.<link> 요소를 추가하여 CSS 파일을 HTML 파일에 연결합니다.여기서 rel 속성은 관계를 나타내며 CSS 파일의 스타일시트입니다.href은 외부 CSS 파일을 링크하는 데 사용됩니다.<body> 원소를 가지고 있다.우리는 여기에서 우리가 웹 페이지에 표시하고자 하는 코드를 작성했다.우선, 우리는 <a> 요소를 추가합니다. 이것은 우리의 오디오에 play() 함수를 촉발합니다.<audio> 요소를 추가하여 오디오 파일을 얻습니다.여기 id 하나 드릴게요.여기서 우리는 오디오가 순환 방식으로 재생될 것을 볼 수 있다.play() 함수를 위한 스크립트를 작성합니다. 사용자가panda를 눌렀을 때 이 스크립트를 터치합니다.스크립트는 id을 통해 오디오 요소를 가져옵니다.<div> 요소를 추가할 것이다.CSS 코드 작성
이제 CSS 애니메이션 보기!각 부분에 대한 상세한 설명을 얻기 위해 아래의 코드를 읽고 계속 읽어 주십시오.
body
{
background: url(https://git.io/JUW4t);
background-size: cover;
overflow: hidden;
}
#panda
{
position:relative;
top:600px;
background: url(https://git.io/JUW4L);
width:250px;
height:330px;
animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;
}
@keyframes walking_animation
{
0%{background-position:0px;}
100%{background-position:3000px;}
}
@keyframes move_forward
{
0%{transform:translateX(-100px);}
100%{transform:translateX(1366px);}
}
#street
{
position:relative;
top:600px;
border-bottom:5px groove green;
}
overflow:hidden을 추가했습니다.300px으로 설정하고 판다의 실제 이미지를 추가했습니다.우리의panda 파일의 폭은 3000px이지만, 12폭의 그림 중 1폭만 표시하고 싶습니다.이를 위해, 우리는 너비와 높이를 바꾼다.첫 번째 판다의 키는 330px이 될 것이다.폭에 대해 프레임당 12개의 동일한 부분으로 나누기 때문에 폭은 250px이 됩니다.Walking_animation이라고 합니다.그것은 판다 12장의 사진을 모두 훑어보겠지만, 원래의 위치를 떠나지 않을 것이다.x축에서 이동할 수 있도록 move_forward이라는 애니메이션이 추가되었습니다. 이 애니메이션은 화면에서 왼쪽에서 오른쪽으로 그림을 이동합니다.Walking_animation은 판다 사진 12장을 모두 조회할 것입니다.이를 위해 background-position을 0에서 3000px으로 이동합니다. 이것은 이미지의 폭입니다.Move_forward은transform 속성을 사용하여 x축에서 판다를 이동합니다.우리는 -100px에서 판다를 번식할 것이다. 판다는 화면의 끝에 나타날 것이다.border-bottom을 추가한 다음 위치를 설정하면 됩니다.뭐 공부 해요?
축하합니다!CSS와 HTML을 사용하여 애니메이션을 만드는 방법을 배웠습니다.당신의 웹 개발 기술은 현재 더욱 선진적이며, 당신은 이미 새로운 주제를 처리할 준비가 되어 있습니다.CSS 기술을 계속 향상시키고 싶다면 웹 응용 프로그램의 주제를 배우는 것을 고려해야 한다.
Educative 과정 CSS Theming. for Professionals은 주제 의식을 가진 응용 프로그램을 개발하는 방법을 가르쳐 줍니다.너는 주제를 둘러싼 실용적인 방법을 몸소 체험할 것이다.마지막으로, 당신은 고도로 맞춤형 놀라운 응용 프로그램을 만들 수 있을 것이다.
웹 개발과 CSS에 익숙하지 않다면 과정 Web Development: Unraveling HTML, CSS, and JavaScript부터 HTML, CSS, 자바스크립트를 간략하게 소개하는 것을 고려해 보십시오.
즐겁게 공부하세요!
웹 개발 및 CSS 계속 읽기
Reference
이 문제에 관하여(애니메이션 CSS 코드: HTML 및 CSS를 사용하여 판다 애니메이션 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/educative/animate-css-code-create-a-panda-animation-with-html-css-34i2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
