CSS3 변형과 애니메이션

유준상·2022년 2월 5일

HTML5/CSS3

목록 보기

5/7

변형 속성 기본

1) HTML 페이지 구성

<body>
  <div class="box"></div>
</body>

2) 스타일 사용

<style>
 .box {
     width: 100px; height: 100px;
     background-color: orange;
 }
 .box:hover {
     width: 200px;
     height: 300px;
 }
 .box:active {
     background-color: red;
 }
</style>

* 변형 속성: 부드러운 애니메이션을 적용할 때 필요한 기능

<style>
    .box {
        transition-duration: 2s
    }
</style>

변형 속성

종류

transition: 모든 transition 속성을 한 번에 사용
transition-delay: 몇 초 후에 재생
transition-duration: 몇 초 동안 재생
transition-property: 어떤 속성을 변형
transition-timing-function: 수치 변형 함수 지정

transition-delay

--> 이벤트가 발생하고 몇 초 동안 기다린 후 애니메이션이 작동할지 지정
transition-delay: 0s;, transition-delay: 3s;

transition-timing-function

--> 변형 움직임 함수
1) transition-timing-function: linear; -> 일정
2) transition-timing-function: ease; -> 점점 빨라짐
3) transition-timing-function: ease-out; -> 점점 느려짐
4) transition-timing-function: ease-in-out;
5) 사용자 지정 함수
-> transition-timing-function: cubic-beizer(X0, Y0, X1, Y1);
transition-property

--> 특정 스타일 속성만 애니메이션을 적용하고 싶을 때 사용
```
<style>
   .bar {
       transition-property: background-color, width;
       transition-duration: 1s, 5s;
   }
</style>
```
* transition 속성은 한 줄로 사용이 가능하다.
순서: property -> duration -> function -> delay
```
transition: background-color 1s ease, width 5s linear 1s;
```
키 프레임과 애니메이션 속성

애니메이션 속성

1) animation
2) animation-delay
3) animation-direction
4) animation-duration
5) animation-iteration-count
6) animation-name
7) animation-play-state: 재생 상태 지정
8) animation-timing-function
--> 변형 속성과 매우 유사하다
애니메이션 지정 형식
```
@keyframes 애니메이션명 {
    from {
    }
    to {
    }
}
```
animation-name

--> 키 프레임 생성 이후 animation-name 속성을 사용해 태그를 키 프레임에 연결
```
#box {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 100px;
    text-align: center;
    background: linear-gradient(#cb60b3 0%, #db36a4 100%);
    animation-name: rint; /* rint 애니메이션을 #box 태그에 연결 */
    animation-duration: 2s;
    animation-timing-function: linear;
}
@keyframes rint {
    from { left: 0; transform: rotate(0deg); }
    50% { left: 500px; }
    to { left: 500px; transorm: rotate(360deg); }
}
```
animation-iteration-count

--> 애니메이션은 default로 한 번만 실행
--> 해당 속성으로 특정 횟수만큼 반복
animation-iteration-count: infinite -> 무한반복

animation-direction

--> 애니메이션을 반복하는 형태를 지정

속성
1) alternate: from -> to -> from 반복 --> 왕복
2) normal: from -> to 반복

animation-play-state

--> 애니메이션을 중지하고 재생할 때 사용하는 속성

애니메이션 속성 역시 한 줄로 입력이 가능하다
```
animation: rint 2s linear none infinite alternate;
```
이름 -> 시간 -> 함수 -> 지연시간 -> 반복 횟수 -> 반복 형태