CSS3 애니메이션 효과를 얻으려면 무엇을 사용해야합니까?-프런트엔드 Q&A-php.cn

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

WBOY

풀어 주다： 2022-06-07 16:51:51

원래의

2330명이 탐색했습니다.

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

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

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

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

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

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

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

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

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

2. 구현 방법

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

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

값 설명

<!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 사용자 정의 애니메이션 구현 CSS3 애니메이션 효과를 얻으려면 무엇을 사용해야합니까?

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를 통해 키 프레임을 정의

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

@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);
    }
}

로그인 후 복사

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