목차
- transition
1-1. transition-property
1-2. transition-duration
1-3. transition-timing-function
1-4. transition-delay
1-5. transition - transform
- @keyframes
3-1. from~to 시작 지점-종료 지점 두 개만 있는 경우
3-2. 0%~100% 중간 작업이 있는 경우
1. transition
| transition-property | 적용할 속성 선택 |
| transition-duration | 진행시간 선택 |
| transition-timing-function | 순차적 속도 선택 |
| transition-delay | 트랜지션 지연시간 선택 |
| transition | 트랜지션 속성값 일괄 설정 |
- 트랜지션(transition)은 시간에 따라 웹 요소의 스타일이 바뀌는 것을 의미한다.
1-1. transition-property
선택자 { transition-property : 속성값; }
transition-property: background-color, transform, width, height;| all | 기본값, 모든 속성 적용 |
| none | 아무 속성도 바꾸지 않음 |
| 속성명 | 해당되는 속성만 적용 예. width, background, translate 등 |
- 애니메이션 효과를 적용할 프로퍼티 목록에 대해 정의한다. 즉 해당 속성들을 컨트롤하겠다고 선언하는 것이다.
- 콤마(,)를 써서 여러 개에 대해 지정할 수 있다.
1-2. transition-duration
선택자 { transition-duration : 시간; }
transition-duration: 2s, 3s, 1s, 10s;- 트랜지션 효과가 얼마 동안 진행될 지 지정한다.
- 시간 값은 밀리초(ms, millisecond) 또는 초(s, second)로 쓸 수 있다.
- transition-property와 같이 콤마(,)를 써서 여러 개에 대해 지정할 수 있으며, 이때 property 값과 1:1로 대응해야 한다.
1-3. transition-timing-function
선택자 { transition-timing-function : 속성값; }
| linear | |
| ease | 진행시간 선택 |
| ease-in / ease-out | 순차적 속도 선택 |
| ease-in-out | 트랜지션 지연시간 선택 |
| cublic-bezier(n, n, n, n) | 구간별 속도 지정(n값: 0~1) |
- 베지어 곡선(cublic bezier)이란, 컴퓨터 그래픽스에서 사용되는 특별한 형태의 곡선으로, CSS 애니메이션 등에서 도형을 그릴 때 사용된다: cublic-bezier
1-4. transition-delay
선택자 { transition-dalay : 시간(s, ms); }
- 트랜지션이 두 개 이상 존재할 때 쓰인다.
- 하나의 트랜지션이 끝나고 그 다음 트랜지션이 시작되기까지의 지연시간을 지정한다.
1-5. transition
선택자 { transition : property duration timing-function delay; }
transition: all 5s ease-in 3s;❗ transition 세부 속성별 기본값
property : all
duration : 0
timing-function : ease
delay : 0
- 트랜지션 속성값을 일괄 지정할 수 있는 속성이다.
- 속성값을 생략하면 기본값으로 읽힌다.
2. transform
| translate(x, y) | 지정 크기만큼 x축, y축으로 이동 |
| scale(x, y) | 지정 크기만큼 x축, y축으로 확대/축소 |
| rotate(각도) | 지정 각도만큼 회전 |
| skew(x, y) | 지정 각도만큼 x축, y축으로 변형(왜곡) |
transform: translate(50px, 50px);
transform: rotate(180deg);- 사용자의 동작에 따라 요소의 위치와 크기가 바뀌거나 이동 또는 회전하는 것을 변형이라고 한다.
- transform 속성에 변형 함수를 써서 표현할 수 있다.
3. @keyframes
| animation-name | 애니메이션 이름 |
| animation-duration | 애니메이션 실행시간 |
| animation-direction | 애니메이션 반복 방향(처음부터 또는 끝나면 다시 역순 재생) |
| animation-iteration-count | 반복 횟수(숫자 또는 무한) |
| animation | 애니메이션 속성 일괄 지정 |
- @keyframes를 사용하면 여러 애니메이션을 일괄 실행할 수 있다.
- 애니메이션 이름과 CSS 속성별로 시점을 나누어 설정하는 것이다: from~to 또는 0%~30%~60%~100% 등등
3-1. from~to 시작 지점-종료 지점 두 개만 있는 경우
<head>
<style>
/* 1. 애니메이션 정의 */
@keyframes jump {
from {
margin-left: 300px;
}
to {
margin-left: 100px;
margin-bottom: 200px;
}
}
/* 2. 애니메이션 jump를 #jump img에 적용 */
#jump {
/* keyframes에서 정한 이름을 작성 */
animation-name: jump;
/* 애니메이션의 실행 시간을 지정하는 속성 */
animation-duration: 2s;
/* 애니메이션을 얼만큼 반복할지 설정 */
animation-iteration-count: 5;
/* 애니메이션 반복 시 처음부터 시작 or 끝에서 역순으로 */
animation-direction: normal;
}
</style>
</head>
<body>
<img class="pika" id="jump" src="../resources/images/pikachu.png">
</body>- 애니메이션 이름을 jump로 정의한 예시이다.
- 시작 지점으로부터(from) 종료 지점으로(to) 이어지도록 from~to로 명시한다.
- 작성한 애니메이션을 요소에 적용한다. 이때 실행시간, 반복횟수, 반복방향 등을 함께 지정할 수 있다.
3-2. 0%~100% 중간 작업이 있는 경우
<head>
<style>
/* 1. 애니메이션 정의 */
@keyframes shake {
0% {
border : 5px solid black;
}
50% {
margin-left: 300px; /*오른쪽으로 이동*/
border: 10px solid black;
border-radius: 50%; /*테두리 둥글게*/
transform: translate(50px, 50px); /*x,y축으로 이동*/
}
100% {
margin-left: 600px;
border: 5px solid black;
transform: rotate(45deg);
}
}
/* 애니메이션 shake를 #shake img에 적용 */
#shake {
/* alternate : 반복 시 역순으로.. 10에서 0, 0에서 100
infinite : 무한 반복 */
animation: shake 2s alternate infinite;
}
</style>
</head>
<body>
<img class="pika" id="shake" src="../resources/images/pikachu.png">
</body>- 0%일 때, 50%일 때, 100%일 때 취할 속성들을 별도로 지정한 예시이다.
- 이때 animation 속성으로 일괄 적용할 수가 있으며, alternate는 반복 시 역순 재생, infinite는 무한 반복함을 의미한다.
'Frontend > CSS' 카테고리의 다른 글
| [CSS] CSS Diner: CSS Selector 연습 게임 (0) | 2022.04.07 |
|---|---|
| [CSS/수업 과제 practice] 개인 홈페이지 제작 (1) | 2022.02.15 |
| [CSS3] 레이아웃 스타일 | display | z-index | flex | grid (0) | 2022.02.13 |
| [CSS3] 테두리 스타일 | border-style | box-shadow (0) | 2022.02.12 |
| [CSS3] 색상 및 배경 스타일 | 이미지 | background (0) | 2022.02.11 |
