CSS3 애니메이션 효과를 얻으려면 무엇을 사용해야합니까?

CSS3 애니메이션 효과 달성: 1. 애니메이션 효과를 얻기 위해 애니메이션 속성과 함께 "@keyframes" 규칙을 사용합니다. 2. 애니메이션 효과를 얻기 위해 전환 속성을 사용합니다. 구문은 "요소 {전환: 속성 이름 시간 속도 곡선 지연"입니다. }".

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 애니메이션 효과를 얻기 위해 사용하는 것

1.

CSS Animations(CSS 애니메이션)은 CSS 애니메이션을 사용할 수 있도록 XML(Extensible Markup Language) 요소를 허용하는 캐스케이딩 스타일 시트에 권장되는 모듈입니다. to 요소가 한 스타일에서 다른 스타일로 점진적으로 전환되는 과정

이동, 회전, 크기 조절 등 일반적인 애니메이션 효과가 많이 있습니다. 복잡한 애니메이션은 여러 개의 간단한 애니메이션의 조합입니다

CSS가 애니메이션을 구현하는 방식에는

transition은 그라디언트 애니메이션을 구현합니다.

animation은 사용자 정의 애니메이션을 구현합니다.

transition의 속성은 다음과 같습니다.

속성: 채우기 필요한 변경 사항 CSS 속성
duration: 전환 효과를 완료하는 데 필요한 시간 단위(s 또는 ms)
timing-function: 완료된 효과의 속도 곡선
delay: 지연 트리거 애니메이션 효과의 시간
타이밍 함수의 값은 다음과 같습니다:

값 설명

선형 균일 속도(입방 베지어(0,0,1,1)와 동일)
느린 것에서 빠른 것, 느린 것까지 (cubic-bezier (0.25,0.1,0.25,1))
ease-in이 천천히 빨라집니다 (cubic-bezier(0.42,0,1,1)과 동일)
ease-out은 천천히 느려집니다(cubic -bezier(0,0,0.58,1)과 동일)
ease-in-out은 먼저 빨라지고 그 다음 느려집니다(cubic-bezier(0.42,와 동일) 0,0.58,1)), 페이드인 효과
cubic-bezier(n,n,n,n) 큐빅-베지어 함수에 자신만의 값을 정의해보세요. 가능한 값은 0과 1 사이의 값입니다
참고: 모든 속성이 전환을 사용할 수 있는 것은 아닙니다. up 애니메이션 효과 변경

    
  
 
请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
 
注释：本例在 Internet Explorer 中无效。
  

출력 결과:

animation 사용자 정의 애니메이션 구현

animation은 다음과 같은 8가지 속성의 약어입니다.

animation-duration은 애니메이션에 필요한 시간을 지정합니다. 한 사이클을 완료하려면 단위는 초(s) 또는 밀리초(ms)이며 기본값은 0입니다.

• animation-timing-function은 애니메이션 타이밍 기능, 즉 애니메이션의 속도 곡선을 지정하며 기본값은 " easy" 선형,easy,easy-in,easy-out,easy-in-out

• animation-delay는 애니메이션 지연 시간을 지정합니다. 즉, 애니메이션이 시작될 때 기본값은 0입니다.

• animation- iteration-count는 애니메이션이 재생되는 횟수를 지정하며 기본값은 1입니다.

• animation-direction은 애니메이션 재생 방향을 지정합니다. 기본값은 일반 일반, 역방향, 대체, 대체-역방향

• animation-입니다. fill-mode는 애니메이션 채우기 모드를 지정합니다. 기본값은 앞으로 없음, 뒤로 모두입니다.

• animation-play-state는 애니메이션 재생 상태(실행 중 또는 일시 중지됨)를 지정합니다. 기본값은 running running이며, Pauser

• animation-name은 @keyframes 애니메이션의 이름을 지정합니다.

• CSS 애니메이션은 일부 키 프레임만 정의하면 되며 브라우저는 타이밍 기능을 기반으로 나머지 프레임을 보간합니다. ,

따라서 요소를 원으로 회전시키려면 시작 프레임과 끝 프레임만 정의하면 됩니다.

@keyframes rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

은 백분율을 사용하여 라이프 사이클을 묘사할 수도 있습니다

@keyframes rotate{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } }

키 프레임을 정의한 후 직접 사용할 수 있습니다:

animation: rotate 2s;

요소 설정에 사용되는 전환(전환) 오버스타일에는 애니메이션과 비슷한 효과지만 디테일이 많이 다릅니다transform(변환)은 요소를 회전, 크기 조정, 이동 또는 기울이는 데 사용됩니다. 스타일 설정의 애니메이션과는 아무런 관련이 없으며 색상과 동일하게 사용됩니다.

요소의 "모양"을 설정하는 것은

translate(움직임)은 단지 변형의 속성 값입니다. 즉, movement

animation(애니메이션)은 애니메이션 속성을 설정하는 데 사용되는 축약된 속성이며 6가지 속성

( 동영상 공유 학습:

)

위 내용은 CSS3 애니메이션 효과를 얻으려면 무엇을 사용해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!