[CSS]#5 Animation
Q.마우스를 위에 올리거나(:hover), trasition없이
애니메이션을 어떻게 만들까?
애니메이션을 사용하면 우리가 원하는 만큼 만들고 재생시킬 수 있다.
애니메이션 작성법(기본): @keyframes + 애니메이션명
e.g.) @keyframes superHotCoinFlip
animation을 작성하는 방법에는 2가지 방법이 있다.
▶1번째 방법-
@keyframes 애니메이션명 {
from { transform: 속성값 } to { transform: 속성값 }
}
효과를 줄 selector {
animation: 애니메이션명 + 지속시간 + 효과 +( infinite )
}
*infinite: 이 속성값이 없으면 애니메이션 효과가 지정된 지속시간을 한번만 수행하고 다시 되지 않음
계속 실행되게 하고 싶다면 추가!
몰라서 찾아본 정보: what is translateX()?
속성값중에 translateX는 The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.
간단히 말하면 traslateX는 x축(가로)로 움직이는 거 예시로, translateX(100px)는 오른쪽으로 100px만큼 움직이는거라고 보면된다.
참고사이트: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX()
▶2번째 방법- from to 대신에 %(percent)를 사용하는 방법
※참고:%퍼센트는 내가 원하는 만큼 세세하게 쪼갤 수 있다.
1번의 방법은 약간 부자연스러운 모션이었다면(translateX(100px)로 무빙이 추가돼서)
2번의 방법을 사용하여 %로 쪼개주면 더 자연스러운 모션이 가능하다.
참고로 마지막 100%{ transform: rotateY(0) } 부분에 translateY(0)을 추가해줘도 같은 의미라서
똑같은 모션이 작동된다.
animation 사용TIP: { }괄호 안의 property는 꼭 transform 이 아니어도 된다 하지만 권고사항으로
transform을 사용하는 것이 좋다. 다른 property예시: border-radius, opacity(투명도 조절) 같은 거 물론 몇몇은
animation이 되지 않기 때문에 직접실행해서 사용가능한 property를 확인하는 것이 좋다.
*속성을 opacity: 0 ; 로 주면 아무것도 안보였다가 다시 보임 잘 사용되는 프로퍼티라니 알아두자!
animation 관련 사이트 : animista