>웹 프론트엔드 >CSS 튜토리얼 >CSS3 전환과 애니메이션의 차이점 소개

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

PHPz
PHPz원래의
2017-04-02 10:19:203619검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.