CSS3 전환과 애니메이션의 차이점 소개

CSS3 전환

CSS3에서는 한 스타일에서 다른 스타일로 특정 효과를 추가할 수 있을 때 Flash애니메이션 또는 JavaScript를 사용할 필요가 없습니다. 다음 요소 위로 마우스를 이동하세요.

즉, 요소 ​​전환을 설정한 후 요소의 속성 을 갑자기 변경하면

다음 방법을 포함하면 요소 너비가 갑자기 변경되면 2초 후에 변경한 값으로 변경됩니다.

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

CSS3 애니메이션

CSS3에서는 애니메이션을 만들 수 있습니다. 많은 웹 페이지 애니메이션 이미지, 플래시 애니메이션 및 JAVAScript를 대체할 수 있습니다.

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
  
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

애니메이션은 미리 설정된 애니메이션 프로세스이며 CSS3는 이 프로세스에 따라 실행합니다.

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