CSS3에서 애니메이션 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS3에서 애니메이션 속성을 사용하는 방법

清浅

풀어 주다： 2018-11-21 10:36:48

원래의

3539명이 탐색했습니다.

CSS3에는 애니메이션 이름, 애니메이션 완료에 필요한 시간, 속도, 지연, 재생 속도, 역방향 재생 여부 등 6가지 애니메이션 애니메이션 속성이 있습니다. 이 글에서는 애니메이션의 애니메이션 속성에 대해 자세히 설명하겠습니다. CSS3에서 이 방법은 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

CSS는 주로 웹 페이지의 스타일과 레이아웃을 설명하는 데 사용되며 CSS3는 최신 CSS 표준이며 CSS3를 사용하면 웹 페이지 콘텐츠를 더욱 풍부하게 만드는 애니메이션을 만들 수 있습니다. CSS3의 애니메이션 속성 ——animation

사용 중 브라우저 호환성 문제에 주의하세요

Internet Explorer 10, Firefox 및 Opera는 애니메이션 속성을 지원합니다.

Safari와 Chrome은 -webkit-animation 속성을 지원합니다

따라서 프로그램을 작성할 때 브라우저 호환성 문제를 고려해야 합니다

animation 속성

은 6가지 애니메이션 속성을 설정하는 데 사용됩니다.

(1) animation- name : 애니메이션의 이름을 지정합니다.

animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中
-webkit-animation-name:demo//Safari 和 Chrome

로그인 후 복사

(2) animation-duration: 애니메이션을 완료하는 데 걸리는 시간(초 및 밀리초 단위)

animation-duration：3s；
-webkit-animation-duration:3s;

로그인 후 복사

(3) animation-timing-function: 애니메이션 속도 곡선

linear: 일정한 속도로 재생

easy: 애니메이션 속도가 처음에는 느리다가 끝 부분에서 빨라졌다가 느려집니다(기본값)

ease-in: 애니메이션이 낮은 속도로 시작됨을 의미

ease-out: 애니메이션이 낮은 속도로 끝나는 것을 의미 속도.

ease-in-out: 애니메이션이 느린 속도로 시작하고 끝납니다.

cubic-bezier(n,n,n,n): Cubase-bezier 함수에 원하는 값을 설정합니다. 값은 0에서 0까지입니다. 1

animation-timing-function：ease；
-webkit-animation-timing-function:ease;

로그인 후 복사

(4) animation-delay: 애니메이션 시작 지연 시간

animation-delay：3s；
-webkit-animation-delay:3s;

로그인 후 복사

(5) animation-iteration-count: 애니메이션 재생 횟수

n: 애니메이션 재생 횟수 값

infinite: 애니메이션의 무한 루프 재생을 의미합니다.

animation-iteration-count：4；//循环四次
-webkit-animation-iteration-count:infinite;//循环无数次

로그인 후 복사

(6) animation-direction: 애니메이션을 역방향으로 재생해야 하는지 여부

Normal 애니메이션이 정상적으로 재생되어야 하는지 여부(기본값)

alternate 애니메이션 차례대로 재생해야 합니다

animation-direction：normal;
-webkit-animation-direction:alternate;

로그인 후 복사

작은 사각형을 오른쪽 아래, 왼쪽 위 방향으로 움직이게 합니다.

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo;
animation-iteration-count：infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:0.1s;
animation-direction: alternate; 
｝
/* Safari and Chrome 浏览器*/
-webkit-animation:demo;/*设置动画名称*/
-webkit-animation-iteration-count：infinite;/*动画执行次数*/
-webkit-animation-duration:5s;/*动画花费时间*/
-webkit-animation-timing-function:ease;/*动画速度*/
-webkit-animation-delay:2s;/*动画延迟*/
-webkit-animation-direction: alternate; /*动画是否反向*/
}
/*设置动画运行区域*/
@keyframes demo
{
	0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
/*Safari and Chrome浏览器*/
@-webkit-keyframes demo
{
    0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
</style>

로그인 후 복사

렌더링:

CSS3에서 애니메이션 속성을 사용하는 방법