DAY_027[국비] 자바 웹프로그래밍 과정

Bona의 블로그 입니다.·2022년 11월 4일
0

국비과정

목록 보기
28/99
post-thumbnail

 🌞 Day 027 

  • CSS : Animation, Keyframe



 🌌 Animation 

 🪐 Transition 

  • 변형 속성

    • 애니메이션을 적용할 때 사용하는 기능

    • 종류

      • transition : 모든 transition 속성을 한 번에 적용
      • transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정
      • transition-duration : 몇 초 동안 재생할 지 지정
      • transition-property : 어떤 속성을 변형할 지 지정
      • transition-timing-function : 수치 변형 함수를 지정

 🪐 Transform 

  1. translate(X,Y) : 지정한 크기만큼 x축과 y 축으로 이동

  2. translateX(X) : 지정한 크기만큼 x축으로 이동

  3. translateY(Y) : 지정한 크기만큼 y 축으로 이동

  4. scale(X,Y) : 지정한 크기만큼 x축과 y 축으로 확대 축소

  5. scaleX(X) : 지정한 크기만큼 x축으로 확대 축소

  6. scaleY(Y) : 지정한 크기만큼 y 축으로 확대 축소

  7. rotate(각도)

    • 지정한 각도만큼 회전 (단위:deg)
    • 2D 평면의 고정점(가운데)을 중심으로 요소를 변형하지 않고 회전하는 변형을 정의
    • 양수(+)는 시계방향 음수(-)는 반시계방향
    • deg는 우리가 알고 있는 각도(360도 한바퀴)로 해석해도 똑같이 적용

  8. skew(X,Y) : 지정한 크기만큼 x축과 y 축으로 왜곡

  9. skewX(X) : 지정한 크기만큼 x축으로 왜곡

  10. skewY(Y) : 지정한 크기만큼 y 축으로 왜곡


 🪐 Transform-origin 

  • transform의 속성들은 고정점, 기준점이 (굳이 지정하지 않으면) 정중앙이 기준이 되는 경우가 많다.

  • 이런 기준점을 변경하고 싶을 때 쓰는 것이 transform-origin속성이다.
    키워드로 지정할 수도 있고 %로 값을 정할 수도 있다.


 🌟 Tip!!! 

  • 한 태그에 여러개의 transform 속성들을 적용하고 싶을 때는 공백으로 구분하면 된다.
     #base:hover #tire{
         transform: translateX(400px) rotate(180deg) scale(1.5);
     }

 🌟 :hover일 때 다른 태그에 css를 바꾸고 싶다면? 

  • 공백 : 자식태그일 때
    '+'를 붙일 때 : 바로 뒤에 있는 태그
    '~'를 붙일 때 : 뒤에 태그 중에서 찾으라는 뜻

  • 앞에 있는 태그나 부모 태그는 안됨!!!


 🪐 Keyframe 

  • 애니메이션 키프레임 : 움직인 또는 변화를 정의

  • from부터 to까지 움직임 또는 변화를 정의한다.
    변화될 애니메이션의 변경요소를 change-bg라는 이름으로 정의

    • from { 최초의 상태 } / to { 변화된 상태 }
    • form : 원래 요소가 갖고 있는 상태에 from에 기술된 상태를 더함
    • change-bg : 각 키프레임들을 구분할 수 있는 개발자가 정의한 이름
    • change-bg 애니메이션을 실행하는 명령이 포함된 css의 대상요소는 from 부터 to까지 설정된 시간 내에 애니메이션 효과를 내며 변화한다.
  • animation-name : 적용할 keyframe이름

  • animaiton-dutation : keyframe이 실행되는 시간


 🌟 Animation Count 

  • keyframe의 반복 횟수와 방향도 지정할 수 있다.

  •  animation-iteration-count 
    : 애니메니션 반복 횟수, 숫자를 쓰면 그 횟수만큼 반복,

    • infinite를 쓰면 무한반복, 지정하지 않으면 1회 실행
    •  animation-direction  : 애니메이션의 진행방향.
      • 지정이 안되어 있으면 정방향(from ➡️ to)
      • animation-direction:  reverse 
        : 역방향(to =➡️ from)
      • animation-direction:  alternate 
        : 정방향 한 번 역방향 한 번 번갈아 가며 진행

 🌟 Keyframe EX - perspective 

  • perspective는 입체감을 추가하는 속성으로 사용자와의 거리를 정의함으로써 transform에 입체감을 부여한다.

  • 움직이는 .box에 적용하니 perspective 값이 잘 적용 안됨... body에 해야 입체감이 잘 느껴진다.

  • perspective는 숫자가 작을 수록 사용자와 가까워진다.

  • 움직이는 대상을 관찰하는 기준에서 적용할 것
    => 즉 움직이고 있는 태그의 부모태그에 적용해야 입체감이 느껴진다.

  • perspective 속성은 관찰 대상이 여럿이기 때문에 부모/조상 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정.

  • transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정.(BUT 왠만하면 입체감이 안 느껴지는 듯)



profile
제가 공부하고 공유하고 싶은 글을 올리고 있습니다.

0개의 댓글