css 애니메이션 속성

884 단어 프런트엔드
1.

Transform은 정적 속성으로 요소의 특수 변형에 자주 사용됩니다.


2.
transition은 간단한 애니메이션 속성입니다
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

transition-property
변환 효과를 설정하는 CSS 속성의 이름을 지정합니다.
transition-duration
과도 효과를 완성하는 데 몇 초나 밀리초가 걸리는지 규정한다.
transition-timing-function
속도 효과를 지정하는 속도 곡선입니다.
transition-delay
변환 효과가 시작되는 시기를 정의합니다.
3.

Animation。공식 Introduction에서 이 속성은transition 속성의 확장이라고 소개합니다.하지만 이 간단한 소개에는 간단하지 않은 것이 담겨 있다. 키프레임.

좋은 웹페이지 즐겨찾기