css 애니메이션 속성
884 단어 프런트엔드
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.