[HTML/CSS] 움직이는 웹사이트 - transform, transition, animation

 

 

#1 transform

• rotate(deg); 입력한 각도만큼 회전
• scale(width, height); 확대(비율)
• skew(x-deg, y-deg); 비틀기
• translate(x, y); 좌표 변경

<style>
	.transition {
    	transform: rotate(45deg);
        transform: scale(2, 3);
        transform: skew(10deg, 20deg);
        transform: translate(100px, 150px);
    }
</style>

 

prefix 접두사

다른 버전의 브라우저에서의 실행을 원할 경우 transform의 앞에 prefix 접두사를 붙인다.

<style>
	.transition {
    	-webkit-transform: rotate(45deg);	/* 크롬, 사파리 */
    	-moz-transform: rotate(45deg);      /* 파이어폭스 */
    	-ms-transform: rotate(45deg);       /* 익스플로러 9.0 */
    	-o-transform: rotate(45deg);        /* 오페라 */
    }
</style>

 

#2 transition

• transition-property: ; 적용하고자 하는 css 속성
• transition-duration: ; 효과가 나타나는 데 걸리는 시간
• transition-timing-function: ; 효과의 속도 (linear: 일정하게)
• transition-delay: ; 딜레이

<style>
	.transition {
    	transition-property: width;
        transition-duration: 4s;
        transition-timing-function: linear;
        transition-delay: 1s;
    }
</style>

<style>
	.transition: hover { width: 400px; }	/* 마우스를 올렸을 때 */
</style>


/* 위 두 가지 종합 */
<style>
	.transition {
    	transition: width 2s linear 1s;
    }
    .transiton: hover { width: 400px; }
</style>

 

#3 animation

transition과 유사함

• animation-name: ;
• animation-duration: ;
• animation-timing-function: ;
• animation-delay: ;
• animation-iteration-count: ; 애니메이션 반복 횟수
• animation-direction: ; 애니메이션 진행 방향 (alternate, normal, reverse)

.animation {
	animation-name: changeColor;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: 5;
    animation-direction: normal;
}

@keyframes changeColor {
	from { background-color: yellow; }	/* 0% */
    to { background-color: green; }		/* 100% */
}

@keyframes: 애니메이션을 적용할 요소에 재생할 프레임 별 시간 비율을 작성한다. 중간 값(%)을 설정해서 작성할 수 있다.

• 0%, from: 시작 프레임
• 100%, to: 끝 프레임

 

prefix 작성 시에는 keyframes에서도 쌍을 이루어 prefix를 작성해주어야 한다.

.transition {
	-webkit-animation: rotation 4s linear 1s 6 alternate;	/* -webkit- */
}

@-webkit-keyframes rotation {	/* -webkit- */
	from { -webkit- transform: rotate(-20deg); }	/* -webkit- */
	to { -webkit- transform: rotate(20deg); }		/* -webkit- */
}