CSS3에서 애니메이션의 장점은 무엇입니까?
- 青灯夜游원래의
- 2022-01-13 16:04:421825검색
css3에서 애니메이션을 구현하면 얻을 수 있는 이점: 1. 브라우저는 애니메이션을 최적화할 수 있습니다(요소가 보이지 않으면 애니메이션이 없어 FPS에 미치는 영향이 줄어듭니다). 2. 구현 코드가 비교적 간단합니다. 3. 하드웨어 가속을 사용할 수 있습니다. 4. 메인 스레드를 차지하지 않습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
일반적으로 CSS3 애니메이션에는 변환, 전환 및 애니메이션의 세 가지 속성만 있습니다.
transition:1s(전환 애니메이션 효과): 한 사람의 특정 값에서 다른 전환 값으로
transform:rotate(300deg) x,y 회전 변환:rotageX(300deg) 변환:rotageY(300deg)
transform:scale (0.5,2) x축 크기 조정, y축 > 1 확대 < 1 축소
변환: TranslateX(100px) x축 변환 변환: TranslateY(100px) Y축 변환
변환: 변환 (100px 100px) x 및 y 축을 변환합니다
transition:rotate(300deg) scale(0.5,2) 동시에 크기 조절과 회전
transition:transform 1s는 변환에 대한 효과를 지정합니다
transition:margin 1s는 크기와 위치를 변경하고 변경된 구조를 표시하며 전환 및 변형 시간이 없습니다
애니메이션은 타임라인과 키 프레임에 중점을 두어 애니메이션을 기반으로 다양한 프레임이 다르게 변경되도록 합니다. 애니메이션과 @keyframe 한편으로는 성능과 동작의 분리를 달성하기 위한 것이기도 합니다
작은 예
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逐帧动画</title>
<style type="text/css">
.a{
width: 1000px;
height: 400px;
background: #bbb;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.b{
font-size: 50px;
width: 400px;
height: 150px;
position: absolute;
top:-150px;
left: 50px;
text-align: center;
background: #aaa;
line-height: 150px;
animation:s 2s infinite;
}
.c{
font-size: 50px;
width: 400px;
height: 150px;
position: absolute;
bottom:-150px;
right: 50px;
background: #ccc;
line-height: 150px;
animation:ss 2s infinite;
}
@keyframes ss{
0%{
transform:translateY(0px);
background: #888;
}
50%{
transform:translateY(-90px);
background: #7dd;
}
50%{
transform:translateY(-150px);
background: #3aa;
}
}
@keyframes s{
0%{
transform:translateY(0px);
background: #888;
}
50%{
transform:translateY(90px);
background: #7dd;
}
50%{
transform:translateY(150px);
background: #3aa;
}
}
</style>
</head>
<body>
<header>
<div>
<div>啦啦啦啦啦啦啦啦</div>
<div>啦啦啦啦啦啦啦啦</div>
</div>
</header>
</body>
</html>css3를 사용하여 애니메이션을 구현하는 이점
1. 브라우저는 애니메이션을 최적화할 수 있습니다. (요소가 보이지 않으면 애니메이션이 없으므로 FPS에 미치는 영향이 줄어듭니다.)
3. 하드웨어 가속을 사용할 수 있습니다
4. 단점:
1. 호환성이 좋지 않습니다.2. 애니메이션 제어가 충분히 유연하지 않고, 실행 프로세스가 약하고, 바인딩 콜백 기능을 첨부할 수 없고, 특정 위치에 콜백 기능을 추가하거나 재생 이벤트를 바인딩할 수 없으며, 진행 보고서가 없습니다.
(학습 영상 공유:css 영상 튜토리얼
)위 내용은 CSS3에서 애니메이션의 장점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!