CSS3 애니메이션 효과를 얻으려면 무엇을 사용해야합니까?
- WBOY원래의
- 2022-06-07 16:51:512365검색
CSS3 애니메이션 효과 달성: 1. 애니메이션 효과를 얻기 위해 애니메이션 속성과 함께 "@keyframes" 규칙을 사용합니다. 2. 애니메이션 효과를 얻기 위해 전환 속성을 사용합니다. 구문은 "요소 {전환: 속성 이름 시간 속도 곡선 지연"입니다. }".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3 애니메이션 효과를 얻기 위해 사용하는 것
1.
CSS Animations(CSS 애니메이션)은 CSS 애니메이션을 사용할 수 있도록 XML(Extensible Markup Language) 요소를 허용하는 캐스케이딩 스타일 시트에 권장되는 모듈입니다. to 요소가 한 스타일에서 다른 스타일로 점진적으로 전환되는 과정
이동, 회전, 크기 조절 등 일반적인 애니메이션 효과가 많이 있습니다. 복잡한 애니메이션은 여러 개의 간단한 애니메이션의 조합입니다
CSS가 애니메이션을 구현하는 방식에는
transition은 그라디언트 애니메이션을 구현합니다.
animation은 사용자 정의 애니메이션을 구현합니다.
2. 구현 방법transition은 그라디언트 애니메이션을 구현합니다.
transition의 속성은 다음과 같습니다.
- 속성: 채우기 필요한 변경 사항 CSS 속성
- duration: 전환 효과를 완료하는 데 필요한 시간 단위(s 또는 ms)
- timing-function: 완료된 효과의 속도 곡선
- delay: 지연 트리거 애니메이션 효과의 시간
- 타이밍 함수의 값은 다음과 같습니다:
값 설명
- 선형 균일 속도(입방 베지어(0,0,1,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)), 페이드인 효과
- 참고: 모든 속성이 전환을 사용할 수 있는 것은 아닙니다. up 애니메이션 효과 변경
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>출력 결과:
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);
}
}from은 첫 번째 프레임을 의미하고, end 프레임
은 백분율을 사용하여 라이프 사이클을 묘사할 수도 있습니다
@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}키 프레임을 정의한 후 직접 사용할 수 있습니다:
animation: rotate 2s;3. 요약
요소 설정에 사용되는 전환(전환) 오버스타일에는 애니메이션과 비슷한 효과지만 디테일이 많이 다릅니다transform(변환)은 요소를 회전, 크기 조정, 이동 또는 기울이는 데 사용됩니다. 스타일 설정의 애니메이션과는 아무런 관련이 없으며 색상과 동일하게 사용됩니다.
요소의 "모양"을 설정하는 것은
translate(움직임)은 단지 변형의 속성 값입니다. 즉, movement
animation(애니메이션)은 애니메이션 속성을 설정하는 데 사용되는 축약된 속성이며 6가지 속성
을 포함합니다.( 동영상 공유 학습:
css 동영상 튜토리얼위 내용은 CSS3 애니메이션 효과를 얻으려면 무엇을 사용해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!