CSS3를 사용하여 @keyframes 애니메이션화

高洛峰
풀어 주다: 2017-03-15 11:27:43
원래의
1991명이 탐색했습니다.

CSS3의 @프레임은 많은 웹페이지 애니메이션 이미지, Flash 애니메이션 및 JAVAScript를 대체할 수 있습니다.

CSS3 애니메이션속성

다음 에는 @keyframes 규칙과 모든 애니메이션 속성이 나열되어 있습니다.

CSS3를 사용하여 @keyframes 애니메이션화

브라우저 지원

표의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

-webkit-, -ms- 또는 -moz- 바로 앞의 숫자는 이 접두사 속성을 지원하는 첫 번째 브라우저 버전 번호입니다.

CSS3를 사용하여 @keyframes 애니메이션화

예:

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */{
    from {background: red;}
    to {background: yellow;}}
로그인 후 복사

@keyframes 애니메이션을 생성하고 선택기에 바인딩합니다. 그렇지 않으면 애니메이션이 아무 효과도 없습니다.

두 개 이상의 CSS3 애니메이션 속성이 선택기에 바인딩되도록 지정합니다.

  • 애니메이션 이름을 지정합니다.

  • 애니메이션 기간을 지정하세요.

예:

p{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */}
로그인 후 복사

참고: 애니메이션의 길이를 정의합니다. 애니메이션의 이름과 지속 시간입니다. 지속시간을 생략하면 기본값이 0이므로 애니메이션이 실행되지 않습니다.

예: 참고: 이 예는 Internet Explorer 9 및 이전 IE 버전에서는 유효하지 않습니다.

아아앙

위 내용은 CSS3를 사용하여 @keyframes 애니메이션화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿