CSS3에서 애니메이션의 장점은 무엇입니까?-프런트엔드 Q&A-php.cn

CSS3에서 애니메이션의 장점은 무엇입니까?

青灯夜游

풀어 주다： 2022-01-13 16:04:42

원래의

1816명이 탐색했습니다.

css3에서 애니메이션을 구현하면 얻을 수 있는 이점: 1. 브라우저는 애니메이션을 최적화할 수 있습니다(요소가 보이지 않으면 애니메이션이 없어 FPS에 미치는 영향이 줄어듭니다). 2. 구현 코드가 비교적 간단합니다. 3. 하드웨어 가속을 사용할 수 있습니다. 4. 메인 스레드를 차지하지 않습니다.

CSS3에서 애니메이션의 장점은 무엇입니까?

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!