CSS3
- Transform
- Transition
- Animation
1. Transform
- 요소를 회전, 크기 변경 및 각도와 위치 변경 시 사용
- rotate
- scale
- skew
- translate
<style>
.transition {
transfrom: rotate(45deg); /* 회전 */
transform: scale(2,3); /* 확대 축소 */
transform: skew(10deg, 30deg); /* 비틀기(각도 변경) */
transform: translate(200px; 100px); /* 위치 변경 */
}
</style>
- rotate(angle): 입력한 각도만큼 회전, 음수 입력 가능
- scale(x, y): width를 x배, height를 y배만큼 확대 (축소 시 소수점 값 입력)
- skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂
- translate(x, y): 선택한 요소의 위치 변경
prefix 접두사
<style>
.transition {
-webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
-mox-transform: translate(100px, 200px); /* 파이어폭스 */
-ms-transform: translate(100px, 200px ; /* 익스플로러 9.0 */
-o-transform: translate(100px, 200px); /* 오페라 */
}
</style>
- Transform은 CSS3의 최신 버전에서만 실행 가능하기 때문에 접두사의 사용으로 각 하위 버전 브라우저의 실행 가능
2. Transition
- 변화하고자 하는 과정을 보여주고자 할 때 사용
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
<style>
.transition {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
</style>
- transition-property: 효과를 적용할 css 속성
- transition-duration: 효과가 나타나는 데 걸리는 시간, 효과가 시작된 시점부터 끝날 시점까지 시간
- transition-timing-function: 효과의 속도 (linear - ‘일정하게')
- transition-delay: 효과 시작 시간 (1s- ‘1초’)
위 css을 다음과 같이 한 줄로 작성 가능
.transition {
transition: width 2s linear 1s;
}
* 다른 순서는 상관없지만 duration 속성 값이 delay 속성 값보다 우선이어야 함
선택자: hover
<style>
.transition:hover { width: 200px; }
</style>
- css에서 미리 만들어 놓은 클래스로, 마우스를 올렸을 때 반응
ex)
<style>
.transition {
transition: width 2s linear 1s;
}
.transition:hover { width: 300px; }
</style>
- 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안 속도 일정하게 변하는 애니메이션 효과
3. Animation
- css 스타일을 다른 css 스타일로 변화
- 애니메이션을 나타내는 css 스타일 + @keyframes
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
.animation {
animation-name: changeWidth; /* 애니매이션 이름 */
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6;
animation-direction: alternate;
}
@keyframes changeWidth {
from { width: 300px; }
to {width: 600px; ]
}
- animation-name : 애니메이션 이름 지정
- animation-duration : 한 사이클의 애니메이션에 소요되는 시간
- animation-timing-function : 애니메이션 효과 속도
- animation-delay : 요소가 로드된 시점과 애니메이션 시작 사이 대기 시간
- animation-iteration-count : 애니메이션 반복 횟수
- animation-direction : 애니메이션 진행 방향
- alternate: from → to → from
- normal: from → to, from → to
- reverse: to → from, to → from
- @keyframes : 시간의 흐름에 따라 애니메이션 정의 (from.. to.. 키워드 사용하여 애니메이션 시작과 끝 시점 정의)
4. 응용
Transform + Animation
.box {
animation: rotation 1000ms linear infinite alternate;
}
@keyframes rotation {
from { transform: rotate(-30deg); }
to { transform: rotate(30deg); }
}
- 1초 동안 일정하게 -30도, 30도,-30도 회전하는 애니메이션을 무한 반복
- 애니메이션 코드를 한 줄로 작성 시, 먼저 나오는 숫자가 duration, 나중에 나오는 숫자가 delay
prefix 작성
.box {
-webkit-animation: rotation 3s linear 1s 6 alternate;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(-10deg); }
to {-webkit-transform: rotate(10deg); }
}
- prefix 작성 시 같은 애니메이션끼리 연동
'Web > HTML&CSS' 카테고리의 다른 글
[HTML&CSS] 반응형 웹 - 미디어쿼리 Media Query (0) | 2022.04.07 |
---|---|
[HTML&CSS] 웹사이트 레이아웃 (0) | 2022.04.05 |
[CSS] CSS 개념 및 구성 요소 (0) | 2022.04.05 |
[HTML] HTML 기본 구조 및 태그 (0) | 2022.04.05 |
댓글