집 > 기사 > 웹 프론트엔드 > CSS3에서 애니메이션을 구현하는 두 가지 방법은 무엇입니까

CSS3에서 애니메이션을 구현하는 두 가지 방법은 무엇입니까

王林원래의: 2021-03-05 15:36:164205검색

CSS3에서 애니메이션을 구현하는 두 가지 방법은 다음과 같습니다. 1. 전환 속성과 변형 속성을 사용하여 각각 전환과 모양을 설정합니다. 2. 애니메이션 속성 animation을 사용하여 애니메이션 효과를 설정합니다.

이 기사의 운영 환경: windows10 시스템, CSS 3, thinkpad t480 컴퓨터.

1. 다음과 같이 전환을 사용하여 전환을 설정하고, 변형을 추가하여 모양을 설정하고, 애니메이션 효과를 형성합니다.

.divadd {
     transition: All 0.4s ease-in-out;
         -webkit-transition: All 0.4s ease-in-out;
         -moz-transition: All 0.4s ease-in-out;
         -o-transition: All 0.4s ease-in-out;
 
     transform:rotate(360deg);
    -ms-transform:rotate(360deg); /* IE 9 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
}

그러나 이 방법은 상대적으로 틈새적이고 제어하기 어렵습니다.

2. 다음과 같이 애니메이션 속성을 추가하고 애니메이션 효과를 설정합니다.

.a1 {
    position: absolute;
    animation: a1 3s;
    opacity: 0
}
@keyframes a1 {
    0% {left: 10px;opacity: 0}
    30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
    90% {left: 100px;background-color: red;opacity: 1}
    100% {left: 10px;opacity: 0}
}

변환 비율 및 왼쪽과 같이 위 백분율 뒤에 대괄호 안에 다양한 속성 값을 추가할 수 있습니다. . . . . . 왼쪽 상단과 같은 위치 지정을 추가할 때 위치 절대값을 설정하는 것을 잊지 마세요.

(학습 영상 공유: css 영상 튜토리얼)

모든 속성은 다음과 같습니다:

animation-name: myfirst;  //动画名称，用于animation引用
animation-duration: 5s;  //动画时长，
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

animation-fill-mode는 애니메이션 종료 후 상태를 설정합니다
none: 기본값. 객체 애니메이션 이외의 상태를 설정하지 마세요. 애니메이션 전의 DOM 상태
forwards: 객체 상태를 애니메이션이 끝난 상태인 100% 또는 애니메이션 방향이 역방향으로 설정된 경우로 설정합니다. , 애니메이션이 끝난 후 표시됩니다. 키프레임의 첫 번째 프레임
뒤로: 객체 상태를 애니메이션이 시작될 때의 상태로 설정합니다. (테스트 결과 DOM이 애니메이션 전 상태가 아닌 것으로 나타났습니다.)
both: 개체 상태를 애니메이션이 종료되거나 시작될 때의 상태로 설정하고 종료 상태 우선 순위

CSS3에서 애니메이션을 구현하는 두 가지 방법은 무엇입니까

관련 기사