CSS 특수 효과 부여

filter

    - 흐림이나 색상 변형 등 그래픽 효과를 적용하기 위한 속성
    - 속성 값은 함수로 이루어져있고, 공백으로 구분하여 여러개 사용할 수 있다.
    - 값
        none            : [기본값]없음
        blur(x)         : 크기값인 x만큼을 반경으로 해서 요소를 흐린다
        brightness(x)   : 비율 값인 x만큼 명도를 지정. 100%(혹은 1.0)이 본래 명도, 0%(혹은 0.0)으로 지정할 경우 완전히 어두워짐
        contrast(x)     : 비율값인 x만큼 대비 지정. 100%(혹은 1.0)이 본래 대비, 0%(혹은 0.0)으로 지정할 경우 완전히 회색이 됨 
        grayscale(x)    : 비율값인 x만큼 흑백으로 지정. x의 범위는 100%(혹은 1.0)부터, 0%(혹은 0.0)까지 100%는 완전 흑백, 0%는 본래 이미지
        hue-rotate(x)   : 각도인 x만큼 색조를 회전. x의 범위는 0deg부터 360deg까지, 360을 초과할 경우 0부터 다시 순환  
        invert(x)       : 비율값인 x만큼 색상 반전. x의 범위는 0%(혹은 0.0)부터 100%(혹은 1.0)까지, 0%가 본래 이미지, 100%가 반전된 이미지  
        opacity(x)      : 비율 값인 x만큼 불투명도 지정. x의 범위는 0%(혹은 0.0)부터 100%(혹은 1.0)까지, 100%가 본래 이미지, 0%가 완전 투명
        saturate(x)     : 비율 값인 x만큼 채도 지정. x의 범위는 0%(혹은 0.0)부터 100%(혹은 1.0)까지, 100%가 본래 채도, 0%는 채도가 없는 이미지  <!--색이 선명한걸 채도라고 함-->
        sepia(x)        : 비율 값인 x만큼 세피아톤 지정. x의 범위는 0%(혹은 0.0)부터 100%(혹은 1.0)까지, 100%가 본래 이미지, 0%는 완전한 세피아톤

transition-delay

    - 트랜지션 발생시작까지 지연시킬 시간을 지정
    - 값
        시간값

transition-duration

    - 해당 요소에 특정 상황에 따라 변화하는 속성에 대해 해당 속성이 변화하는데 걸리는 시간을 지정하기 위함
    - 중간값이 없는 속성, 값 간에 중간이 없는 경우, 트랜지션이 작동하지 않음
    - 값
        시간 값

transition-property

    - 트랜지션의 적용을 받을 CSS속성을 지정
    - 해당 속성에 명시되지 않은 CSS 속성은 트랜지션을 적용받지 않음
    - 값
        all             : [기본값] 모든 가능한 CSS속성에 대해 트랜지션을 적용
        [속성이름,...]  : 적용시킬 CSS속성 이름을 쉼표(,)로 구분하여 여러개 작성

transition-timing-function

    - 트랜지션이 적용되는데 있어, 시간의 흐름에 따른 변화 완료율을 계산하는 함수를 지정
    - 값
        ease        : [기본값]
        ease-in
        ease-in-out
        ease-out
        linear
        사용자 정의 베지어 곡선 함수(cubic-bezier(...)): https://matthewlein.com/tools/ceaser

transform

    - 회전, 크기, 위치, 기울이기 등 모양이나 상태에 변화를 줌
    - 속성 값은 함수로 이루어짐, 공백으로 구분하여 여러개 사용 가능
    - 값
        none            : [기본값] 없음
        rotateX(x)      : 각도인 x만큼 X축을 기준으로 회전      
        rotateY(x)      : 각도인 x만큼 Y축을 기준으로 회전
        rotateZ(x)      : 각도인 x만큼 Z축을 기준으로 회전
        scale(x)        : 비율인 x만큼 확대/축소. 100%(혹은 1.0) 기본 크기, 0%(혹은 0.0) 작음
        translate(x, y) : 크기 혹은 비율 값인 x만큼 X축으로, y만큼 Y축으로 이동. 이때 x 혹은 y가 비율 값이라면 해당 요소의 가로, 세로 크기에 비례하게 이동
        translateX(x)   : 크기 혹은 비율 값인 x만큼 X축으로 이동
        translateY(x)   : 크기 혹은 비율 값인 x만큼 Y축으로 이동

 

@keyframes
    - CSS에서 애니메이션을 작성하기 위해 사용하는 쿼리, from부터 to까지 혹은 0%부터 100%까지, 애니메이션의 한 사이클에 대한 내용을 담는다.
    - 작성 예시는 아래와 같다

@keyframes[애니메이션 이름]{
    from{

    }
    to{

    }
}

animation-delay

    - 최초 사이클이 시작되기 전 지연시킬 시간 지정. 사이클 간의 시간에는 영향이 없다
    - 값
        시간 값

animation-duration

    - 한 사이클을 완성하는데 걸리는 시간 지정
    - 값
        시간 값

animation-iteration-count

    - 애니메이션 반복 횟수 지정
    - 값
        자연수      : 기본값은 1
        infinite    : 무한

animation-name

    - @keyframes 쿼리에서 작성한 애니메이션 이름을 값으로 사용, 선택자에 의해 선택된 요소에 애니메이션을 적용하기 위한 속성
    - 값
        none    : [기본값]애니메이션 없음
        [애니메이션 이름]

animation-play-state

    - 애니메이션 재생 상태 지정
    - 값
        running     : [기본값]재생 중
        paused      : 일시 정지

animation-timing-function

    - 애니메이션이 적용되는데 있어, 시간의 흐름에 따른 사이클 완료율을 계산하는 함수를 지정하기 위함
    - 값
        ease        : [기본값]
        ease-in
        ease-in-out
        ease-out
        linear
        사용자 정의 베지어 곡선 함수(cubic-bezier(...))
    참고: https://matthewlein.com/tools/ceaser