변형 속성 기본

이 절 에서는 transition-duration 속성을 사용해 봅시다. 구형 브라우저와 호환하려면 코드 처럼 벤더 프리픽스를 적용한 transition-duration 속성을 사용해야 합니다.

🤔여기서 벤더 프리픽스란..?

벤더 프리픽스란 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.
❗️주요 웹 브라우저의 벤더 프리픽스
InternetExplore: -ms-
Chrome: -webkit-
FireFox: -moz-
Safari: -webkit-

<style>
     .box{
            width: 100px;
            height: 100px;
            background-color: orange;

        -ms-transition-duration: 2s;
        -webkit-transition-duration: 2s;
        -moz-transition-duration: 2s;
           transition-duration: 2s;
        }
        .box:hover{
            width: 200px;
            height: 300px;
        }
        .box:active{
            background-color: red;
        }
</style>

변형 속성

속성이름	설명
transition	모든 transition 속성을 한 번에 사용합니다.
transition-delay	이벤트 발생 후 몇 초 후에 재생할지 지정합니다.
transition-duration	몇 초 동안 재생할지 지정합니다.
transition-property	어떤 속성을 변형할지 지정합니다.
transition-timing-function	수치 변형 함수를 지정합니다.

transition-duration 속성

#graph 태그에 마우스를 올릴 경우 5초 동안 애니메이션이 작동합니다.

<style>
      #graph{
            width: 680px;
            border: 3px solid black;
        }
        .bar{
            width: 10px;
            height: 50px;
            background-color: orange;
            margin: 5px;

            transition-duration: 5s;
        }
        #graph:hover> .bar{
            width: 680px;
        }
</style>

transition-delay 속성

이벤트가 발생하고 몇 초 동한 기다린 후 애니메이션이 작동할지 지 지정하는 속성.

<style>
   transition-delay: 3s;
</style>

transition-timing-function 속성

수치를 변형하는 함수를 지정할 때 사용하는 속성

<style>
   transition-timing-function: linear;
   transition-timing-function: ease;
   transition-timing-function: ease-in;
   transition-timing-function: ease-in-out
</style>

transition-propery 속성

애니메이션을 만들다 보면 특정 스타일 속성만 애니메이션을 적용하고 싶을 때가 있습니다. 또하 각각의 속성에 다른 형태로 애니메이션을 진행하게 하고 싶을 수도 있습니다. 이렇게 각각의 속성에 다른 형태의 애니메이션을 적용하고 싶을 때는 transition-property 속성을 사용합니다.

<style>
   #graph{
            width: 500px;
            border: 5px solid black;
        }
        .bar{
            width:10px;
            height: 50px;
            background-color: orange;
            margin: 5px;
            
            transition-duration: 3s;
        }
        #graph:hover> .bar:nth-child(1){
            background-color: red;
            width: 100px;
        }
        #graph:hover> .bar:nth-child(2){
            background-color: blue;
            width: 300px;
        }
        #graph:hover> .bar:nth-child(3){
            background-color: green;
            width: 500px;
        }
        #graph:hover> .bar:nth-child(4){
            background-color: yellow;
            width: 300px;
        }
        #graph:hover> .bar:nth-child(5){
            background-color: pink;
            width: 400px;
        }
</style> 	

만약 background-color 속성은 1초 동안 변형되고 width 속성은 5초 동안 변형되게 만들고 싶으면 아래와 같이 입력합니다.

<style>
     transition-property: background-color, width;
     transition-duration: 1s, 5s;
</style>

키 프레임과 애니메이션 속성

속성이름	설명
animation	모든 animation 속성을 한 번에 적용합니다.
animation-delay	이벤트 발생 후 몇 초 후에 재생할지 지정합니다.
animation-direction	애니메이션 진행 방향을 설정합니다.
animation-duration	애니메이션을 몇 초동안 재생할지 지정합니다.
animation-iteration-count	애니메이션 반복 횟수를 지정합니다.
animation-name	애니메이션 이름을 지정합니다.
animation-play-state	애니메이션 재생 상태를 지정합니다.
animation-timing-function	수치 변형 함수를 지정합니다.

<style>
     @keyframes rint {
            from{

            }
            to{
                
            }
        }
</style>

키프레임은 @keyframes 이름 형태로 입력합니다. 키 프레임 안에는 퍼센트 단위로 애니메이션을 적용합니다. 예외적으로 0%경우와 100% 경우는 from 키워드와 to 키워드를 사용할 수 있습니다.

아래의 코드 처럼 애니메이션이 10초라고 가정한다면 0초, 5초, 10 초일때의 형태를 지정한것입니다.

<style>
     @keyframes rint {
            from{
                left: 0;
                transform: rotate(0deg);

            }
            50%{
                left: 500px;

            }
            to{
                left: 500px;
                transform: rotate(360deg);
            }
        }
</style>

animation-name 속성

키 프레임을 생성한 이후에는 animation-name 속성을 사용해 태그를 키 프레임에 연결합니다.

<style>
  animation-name: rint;
  animation-duration: 2s;
</style>

❗️애니메이션 속성은 반드시 animation-name 속성과 animation-duration 속성을 사용해야 합니다.

animation-iteration-count 속성

애니메이션을 특정 횟수만큼 반복하고 싶을 때는 animation-iteration-count 속성을 사용합니다. animation-iteration-count 속성에는 숫자를 적용하며 숫자만큼 애니메이션을 반복합니다.만약 무한 반복하고 싶으면 infinite 키워드를 적용합니다.

<style>
   animation-iteration-count: infinite;
</style>

animation-direction 속성

animation-direction 속성은 애니메이션을 반복하는 형태를 지정합니다.
| animation-direction 속성 |설명 |
|----|:----|
|alternate|from 에서 to로 이동 후 to에서 from으로 이동을 반복합니다.
|normal| 계속 from 에서 to로 이동합니다.

<style>
  animation-direction: alternate ;
</style>

animation-play-state 속성

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

<style>
  animation-direction: alternate ;
</style>