[ transition ]

• 해당 element의 display 속성값이 [ block ] 혹은 [ inline-block ] 값이어야 한다.

a {
    display : inline-block;
}

4. transition-timing-function : (값)

변화하는 속도의 패턴을 지정해주기 위해 사용.

다음은 기본적으로 많이 사용하는 값.

* ease : 천천히 시작해서 도중에 빨라졌다가 느려지면서 종료

* ease-in : 천천히 시작해서 점점 가속

* ease-out : 천천히 시작해서 느려지면서 종료

* ease-in-out : ease와 동일

* linear : 일정한 속도로 변화

위의 네가지 기능들을 참고하여 

다음과 같은 구문을 작성해 실행해 봅시다.

a {
    display : inline-block;
    /*모든 속성에 대하여 변화시킴*/
    transition-property: all;
    /*변화과정의 속도를 1초로 지연시킴*/
    transition-duration: 1s;
    /*위에 두줄은 [ transition : all 1s; ] 와 같은 의미 */
}
a:active {
    /*위치를 가로축, 세로축을 변화시킴*/
    transform : translate(20px, 30ox);
    /*글자 크기를 변화시킴*/
    font-size : 2rem;
}