CSS3에서 전환과 애니메이션의 차이점은 무엇입니까

CSS3의 전환과 애니메이션의 차이점: 1. CSS 전환에는 이벤트 트리거가 필요하지만 CSS 애니메이션은 그렇지 않습니다. 2. CSS 전환에는 각각 시작 및 종료 동작을 설정하는 키 프레임 세트(2개)만 있습니다. CSS 애니메이션은 여러 키프레임을 정의할 수 있습니다.

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

전환 전환

CSS 변경을 더 원활하게

property:

property	description
transtion-property	전환 속성 지정
transtion- 기간	전환에 필요한 시간 지정
transtion-timing-function	전환 기능 지정
transtion-delay	전환 지연 시간 지정

구문: ​​

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

밤나무:

<style>
img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}
</style>

transition 간단하고 사용하기 쉽다는 장점이 있지만 몇 가지 주요 제한 사항이 있습니다.

• 전환은 이벤트가 트리거되어야 하므로 웹페이지가 로드될 때 자동으로 발생할 수 없습니다.
• 전환은 일회성 이벤트이며 계속해서 트리거되지 않는 한 반복적으로 발생할 수 없습니다.
• Transition은 시작 상태와 끝 상태만 정의할 수 있고 중간 상태는 정의할 수 없습니다.
• 전환 규칙은 하나의 속성에 대한 변경 사항만 정의할 수 있으며 여러 속성을 포함할 수 없습니다.

CSS 애니메이션은 이러한 문제를 해결하기 위해 제안되었습니다.

애니메이션 애니메이션

더 복잡한 애니메이션 효과를 얻기 위해 키 프레임을 제어하여 애니메이션의 각 단계를 제어하세요.

Properties:

Properties	Description
animation-name	지정 키프레임 애니메이션 이름
animation-duration	애니메이션 재생에 필요한 시간을 초 단위로 지정
animation-timing-function	애니메이션 재생 방법 지정
animation-delay	지정 애니메이션 시작 시간(초)
animation-iteration-count	애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1이며, 무한인 경우 무한 루프로 재생됩니다
animation -direction	애니메이션의 재생 방향을 지정합니다. 기본값은 대체인 경우 차례로 역방향으로 재생됩니다.

애니메이션 제작은 두 부분으로 나누어집니다.

• 애니메이션 선언 with keyframe

• 애니메이션에서 키프레임으로 선언된 애니메이션을 호출합니다.

@keyframes는 애니메이션에 여러 프레임이 있을 수 있습니다.

@keyframes의 스타일 규칙은 여러 백분율로 구성됩니다. 이 규칙에 여러 백분율을 만들어 지속적으로 변화하는 효과를 얻을 수 있습니다.

Chestnut:

<style>
    img{
        width:90px;
        height:90px;
        animation: mychange 1s infinate 1s;
        -webkit-animation: mychange 1s infinate 1s;
    }
    
    @keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
    @-webkit-keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
</style>

위 코드에서 0%~100% 사이의 퍼센트 기호는 생략할 수 없으며, 0%는 from으로, 100%는 to로 바꿀 수 있습니다. mychange 애니메이션이 효과를 가지려면 CSS3 애니메이션 속성을 통해 호출되어야 합니다.

CSS 전환과 애니메이션의 차이점

가장 큰 차이점은 전환이 시간이 지남에 따라 CSS 속성을 변경하려면 이벤트를 트리거해야 한다는 것입니다. 애니메이션은 이벤트를 트리거하지 않고도 명시적일 수도 있습니다. 요소의 CSS 속성을 계속해서 변경하세요. 애니메이션 효과를 얻을 시간입니다.

1) CSS 전환이 작동하려면 이벤트(예: :hover 등)에 의해 트리거되어야 하지만 애니메이션은 그렇지 않습니다.

2) 전환에는 하나의 키 프레임 세트(2개: 시작-끝)만 있고 애니메이션은 여러 키 프레임을 정의할 수 있습니다.

3) 전환 및 애니메이션을 사용하여 마우스를 멀리 이동하면 동적 효과를 만들 수 있습니다. 전환으로 생성된 효과는 천천히 원래 모양으로 돌아가고, 애니메이션은 갑자기 원래 모양으로 돌아갑니다. 원래 모습.

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드 입문 튜토리얼)

위 내용은 CSS3에서 전환과 애니메이션의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!