집 > 기사 > 웹 프론트엔드 > CSS3 애니메이션 속성의 Transitions 속성과 Animations 속성의 기능 구현

CSS3 애니메이션 속성의 Transitions 속성과 Animations 속성의 기능 구현

不言원래의: 2018-08-24 10:59:431846검색

이 글의 내용은 CSS3 애니메이션 속성의 Transitions 속성과 Animations 속성의 기능적 구현에 관한 내용입니다. 필요한 친구들이 참고하시면 좋을 것 같습니다.

1 전환 기능

(1) 브라우저 지원:

현재까지: Safari3.1 이상, Chrome8 이상, Firefox4 이상, Opera10 이상, IE11 이상 브라우저에서 이 기능을 지원합니다.

(2) 기능

CSS3에서 Transitions 기능은 지정된 시간 내에 요소의 속성을 한 속성 값에서 다른 속성 값으로 원활하게 전환하여 애니메이션 기능을 구현합니다.

(3)

사용 방법: 속성 기간 timing-function

property: 원활하게 전환되어야 하는 property를 나타냅니다.

duration: 속성의 원활한 전환을 완료하는 데 time 소요되는 시간을 나타냅니다.

timing-function: 원활한 전환을 위해 사용되는 method를 나타냅니다.

div{
background-color：#ffff00;
transition：background-color 1s linear;//在1秒内让div元素的背景色从黄色平滑过渡到浅蓝色。
}
div{
background-color：#00ffff；
}

(4)

transition-property：background-color；
transition-duration：1；
transition-timing-function：linear；

를 사용하는 또 다른 방법 (5) 전환 지연 속성

은 변형 애니메이션 특수 효과 delay가 실행을 시작하는 시간을 지정합니다. 속성 값은 초 또는 밀리초 단위로 지정할 수 있습니다.

transition-delay：1s；
//或 transition：background-color 1s linear 2s；（在第四个参数中书写延迟时间）

(6) Transitions 기능을 사용하면 여러 속성 값을 동시에 원활하게 전환할 수 있습니다.

transition：background-color 1s linear，color 1s linear，width 1s linear；

(7) 이동, 회전 등 애니메이션 효과

img{
position：absolute；top：70px；left：0；
transform：rotate（0deg）；
transition：left 1s linear，transform 1s linear；
}
 img：hover{
left：30px；
transform：rotate（720deg）；
}

(8) 단점

시작만 지정할 수 있습니다. 속성의 값과 최종 값을 확인한 후 이 두 속성 값 사이에서 원활한 전환이 이루어지며 더 복잡한 애니메이션 효과는 얻을 수 없습니다.

2 애니메이션 기능

(1) 브라우저 지원:

현재까지: Safari4 이상, Chrome2 이상, Firefox20 이상, Opera18 이상, IE11 이상 브라우저에서 이 기능을 지원합니다.

(2) 함수

는 Transitions 함수와 동일하며 둘 다 요소의 속성 값을 변경하여 애니메이션 효과를 얻습니다.

차이점: 애니메이션 기능은 여러 개의 키프레임을 정의하고 각 키프레임에 있는 요소의 속성 값을 정의하여 더욱 복잡한 애니메이션 효과를 얻습니다.

(3)키프레임 모음 생성

@keyframes 키프레임 모음 이름 {키프레임 생성 코드}

(4)키프레임 생성 코드(다음과 유사)

40%{이 키 스타일 코드 인 프레임}

(40%는 변경된 프레임이 전체 애니메이션 프로세스의 40%, 시작 프레임이 0%, 끝 프레임이 100%라는 의미)

@keyframes mycolor{
0%{
background-color：red;
}
40%{
background-color：darkblue;
}
70%{
background-color：yellow;
}
100%{
background-color：red;
}
}

(5)이것을 스타일에 사용하세요 키프레임 요소 컬렉션

div{
animation-name：my-color； //指定关键帧集合的名称
animation-duration：5s； //指定完成整个动画所花费的时间
animation-timing-function：linear； //指定实现动画的方法
}

(6) 기타 속성

animation-delay: 애니메이션을 시작하기 전에 몇 초 또는 밀리초를 지연할지 지정하는 데 사용됩니다.

animation-iteration-count: 애니메이션 실행 횟수를 지정하는 데 사용되며 무한으로 지정할 수 있습니다.

animation-direction: 애니메이션의 실행 방향을 지정하는 데 사용됩니다. 지정 가능한 속성 값은 다음과 같습니다.

normal: 초기 값(애니메이션이 실행된 후 초기 상태로 돌아감)
alternate: 애니메이션 실행 방향을 번갈아
reverse: 애니메이션을 실행 the reverse Direction
alternate -reverse: 애니메이션의 실행 방향을 반대 방향

번갈아 변경합니다. (7) 한 줄의 스타일 코드에서 애니메이션 애니메이션을 정의할 때 다음 작성 방법

animation을 사용합니다. : 키프레임 이름, 애니메이션 실행 시간, 애니메이션 실행 방법 애니메이션 실행 횟수.

(8) ) 여러 속성 값이 동시에 변경되는 애니메이션을 구현하려면

각 키 프레임에서 이러한 속성 값을 동시에 지정하기만 하면 됩니다.

3 实现动画的方法

方法	属性值的变化速度
linear	在动画开始时与结束时以同样速度进行改变
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

4 实现网页的淡入效果

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入效果。

@keyframes fadein{
0%{
opacity：0；
background-color：white;
}
100%{
opacity：1；
background-color：white;
}
body{
animation-name： fadein； 
animation-duration：5s； 
animation-timing-function：linear； 
animation-iteration-count：1；
}