[CSS]#5 Animation

Q.마우스를 위에 올리거나(:hover), trasition없이 

애니메이션을 어떻게 만들까?

 

애니메이션을 사용하면 우리가 원하는 만큼 만들고 재생시킬 수 있다. 

 

애니메이션 작성법(기본): @keyframes + 애니메이션명 

e.g.) @keyframes superHotCoinFlip

 

animation을 작성하는 방법에는 2가지 방법이 있다. 

▶1번째 방법-

@keyframes 애니메이션명 {

from { transform: 속성값 } to { transform: 속성값 }

}

효과를 줄 selector {

animation: 애니메이션명 + 지속시간 + 효과 +( infinite )

}

*infinite: 이 속성값이 없으면 애니메이션 효과가 지정된 지속시간을 한번만 수행하고 다시 되지 않음 

계속 실행되게 하고 싶다면 추가!

animation 1번째 방법 예시 - from to 사용하기 

몰라서 찾아본 정보: what is translateX()?

속성값중에 translateX는 The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.

translateX

간단히 말하면 traslateX는 x축(가로)로 움직이는 거 예시로, translateX(100px)는 오른쪽으로 100px만큼 움직이는거라고 보면된다. 

참고사이트: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX()

 

 

▶2번째 방법- from to 대신에 %(percent)를 사용하는 방법 

animation 2번째 방법 예시 - %퍼센트 사용하기

※참고:%퍼센트는 내가 원하는 만큼 세세하게 쪼갤 수 있다.

 

1번의 방법은 약간 부자연스러운 모션이었다면(translateX(100px)로 무빙이 추가돼서)

2번의 방법을 사용하여 %로 쪼개주면 더 자연스러운 모션이 가능하다. 

참고로 마지막 100%{ transform: rotateY(0) } 부분에 translateY(0)을 추가해줘도 같은 의미라서 

똑같은 모션이 작동된다. 

 

animation이 적용되는 다른 properties

 

animation 사용TIP: { }괄호 안의 property는 꼭 transform 이 아니어도 된다 하지만 권고사항으로 

transform을 사용하는 것이 좋다. 다른 property예시: border-radius, opacity(투명도 조절) 같은 거 물론 몇몇은 

animation이 되지 않기 때문에 직접실행해서 사용가능한 property를 확인하는 것이 좋다.

*속성을 opacity: 0 ; 로 주면 아무것도 안보였다가 다시 보임 잘 사용되는 프로퍼티라니 알아두자!

 

animation 관련 사이트 : animista