CSS3 애니메이션 애니메이션 속성
CSS3의 애니메이션 속성 사용법에 대한 자세한 설명:
애니메이션은 중국어로 "애니메이션"을 의미합니다. 실제로 애니메이션 속성은 요소의 애니메이션 효과를 정의하는 데 사용됩니다. flash나 js를 사용하여 제작한 애니메이션은 다소 거칠지만 기본적인 애니메이션 요구 사항을 충족할 수 있으므로 이 속성을 마스터하는 것이 필요합니다.
1. 기본 지식:
다음 글을 읽기 전, CSS3의 @keyframes 사용법에 대한 자세한 설명을 미리 참고하는 것이 좋습니다.
전환 속성을 사용하면 애니메이션 전환 효과를 얻을 수 있지만, 이 속성에는 단점이 있습니다. 즉, 초기 값에서 종료 값으로의 전환 과정을 제어하기 어렵기 때문에 애니메이션 효과를 더 자세히 제어할 수 없으며, 애니메이션 속성 @keyframes로 정의된 애니메이션 이름을 결합하여 애니메이션 전환 프로세스를 더 자세히 제어할 수 있습니다. 이 속성은 테두리, 배경 및 기타 속성과 같은 복합 속성입니다.
전환 속성에 대해서는 CSS3의 전환 속성에 대한 자세한 설명을 참조하세요.
문법 구조:
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*
매개변수 분석:
1.animation-name: 이 속성은 요소에 적용되는 애니메이션 이름을 지정합니다. 이 이름은 @keyframes로 정의됩니다.
2.animation-duration: 이 속성은 애니메이션의 지속 시간을 지정하는 데 사용됩니다.
3.animation-timing-function: 애니메이션의 전환 유형을 지정하는 데 사용됩니다.
4.animation-delay: 애니메이션 실행 시작까지의 지연 시간을 지정하는 데 사용됩니다.
5.animation-iteration-count: 애니메이션의 반복 횟수를 지정하는 데 사용됩니다.
6.animation-direction: 애니메이션 루프에서 역방향 이동이 발생할지 여부를 지정하는 데 사용됩니다.
7.animation-play-state: 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.
8.animation-fill-mode: 객체 애니메이션 시간 이외의 상태를 지정합니다.
특별 지침:
1. 여러 속성 값 세트가 제공되는 경우 쉼표로 구분하세요.
2. 해당 스크립트 기능은 애니메이션입니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 div 요소의 왼쪽 속성 값을 설정하여 0px에서 200px로의 전환을 애니메이션화할 수 있고, 주기를 무한 반복할 수 있으며 역방향 이동을 수행할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
0% {top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 첫 번째 코드보다 더 복잡합니다. 다음은 실행 프로세스를 소개합니다.
1. 전체 애니메이션의 총 시간은 4초로 설정됩니다.
2.@keyframes는 애니메이션의 4단계를 정의합니다. 0%-25% 기간에 왼쪽 속성 값을 0에서 100px로 설정하고 배경색을 빨간색에서 파란색, 25%-50%, 50%-75%로 변환합니다. 75%~100%도 마찬가지입니다.
3. 무한 루프 및 역방향 모션 효과를 얻을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 div에 대한 여러 애니메이션 속성 세트를 쉼표로 구분하여 한 번에 설정합니다.
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
