[CSS -9] CSS 다양한 효과

CSS 중급 다양한 효과

변형과 전환

transform 속성

• 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻함
• 위치의 요소는 x축과 y축을 기준으로 바뀜
• 변형을 적용하기 위해서 CSS의 transform 속성을 사용
• CSS가 지원하는 다양한 변형 관련 함수들은 속성 값으로 지정

함수	설명
trnaslate(x,y)	지정한 크기 만큼 x축, y축 방향으로 이동
scale(x,y)	지정한 크기 만큼 x축, y축으로 확대 및 축소
skew(x,y)	지어한 각도만큼 x축, y축으로 비틀어 왜곡
rotate(deg)	지정한 각도만큼 회전

• transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태

transition 속성

• transition 속성을 이용하면 요소에 지정되어 있는 스타일 속성은 완전히 다른 스타일로 변화시킬 수 있음
• transition은 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정 할 수 있어 다양한 애니메이션 효과를 만들 수 있음
• transition 속성은 단축 속성
• 변화를 주고자 하는 하는 속성이나 실행 시간, 실행 방법, 지연시간 등에 대한 정보를 포함할 수 있음
• transition 하위 속성

  접미사	설명
  -property	변화 대상 속성을 지정
  -duration	변화가 실행될 시간을 지정
  -delay	변화 시작 전 지연 시간을 지정
  -timing-function	변화 실행 시 실행 곡선 방식을 지정

  • transition-timing-funtion의 대표적인 키워드

    함수	설명
    ease	기본값, 점점 속도가 빨라지다가 끝날 때 다시 느려지는 방식
    linear	처음부터 끝까지 같은 속도로 진행
    ease-in	느리게 시작했다가 점점 빨라짐
    ease-out	빠르게 시작했다가 점점 느려짐

애니메이션 효과

• CSS는 웹 페이지 상 표시되는 콘텐츠과 움직임을 구현할 수 있도록 @keyframes모듈과 animation속성을 지원
• 애니메이션을 표현하는 여러개의 프레임은 @keyframes모듈을 이용해 정의
• 백분육을 이용해 프레임을 나누거나, 별도의 키워드로 간단하게 나눌 수도 있음
• animation은 단축소성
• animation은 하위 속성들을 함께 지정하면 애니메이션의 실행 시간이나 방식 등을 추가로 정의 가능
  • 하위 속성

    접미사	의미
    -name	적용할 키프레임 이름(가장 중요)
    -duration	애니메이션 지속 시간
    -delay	애니메이션 시작 전 시간
    -timing-function	속도 그래프
    -direction	동작 진행 방향
    -iteration-count	반복 횟수
    -fill-mode	전후 상태 설정
    -play-state	애니메이션 적용 여부