css 애니메이션 정보
css 애니메이션첨부파일
본문
저는 의뢰인께서 슬라이드의 폰트에 애니메이션을 추가하길 원해서 검색을 하여 적용 하였습니다.
하지만 그렇게 멋지고 우아한 기능을 자바스크립트나 방대한 css를 사용하지 않고도 이렇게 가능하다는것이 놀라울 따름입니다.
위의 코드를 설명드리자면, .fosl은 제가 슬라이드의 폰트에 적용 해 놓은 클래스명 입니다.
.row는 인덱스의 일부분의 클래스 이름이구요.
.mofont는 두번째줄의 슬라이드폰트 입니다.
animation-duration: 1.5s;은 글자가 오른쪽에서 왼쪽으로 1.5초만에 오겠다는 것입니다.
천천히 오기를 희망하신다면 3이나 4나 5나 그 이상이라도 원하시는 초를 입력하시면 됩니다.
animation-name: slidein; 이것은 아래 @keyframes의 개별 이름입니다.
@keyframes slidein 이렇게 사용하시면 되구요.
keyframes의 이름을 다르게 주고싶으면 slidesir 또는 a라고 하셔도 됩니다. 자기만 알고있으면 됩니다.
slidein2 이것은 제가 혹시나 하고 테스트 해봤는데요.
from에 font-size: 1px 을 두니 글자픽셀이 1px에서 to에 아무효과도 넣지않으니 원래 글자크기로 돌아갔습니다.
쉽게말해서, from에 넣은 스타일로 시작해서 to에 넣은 스타일로 끝나는 것이지요.
width: 300% 이것은 300%의 위치에서 기존에 위치한 100%자리로 돌아오게끔 하기위해 300%자리부터 시작하는것입니다.
★ @keyframes slidein은(는) 우측에서 좌측으로 이동하는 애니메이션이구요.
★ @keyframes slidein2는(은) 글자폰트가 1px에서 기존 글자크기로 돌아가는 애니메이션입니다.
허접한 초보자의 팁이지만, 유용하게 사용하시길 바랍니다.
하지만 그렇게 멋지고 우아한 기능을 자바스크립트나 방대한 css를 사용하지 않고도 이렇게 가능하다는것이 놀라울 따름입니다.
위의 코드를 설명드리자면, .fosl은 제가 슬라이드의 폰트에 적용 해 놓은 클래스명 입니다.
.row는 인덱스의 일부분의 클래스 이름이구요.
.mofont는 두번째줄의 슬라이드폰트 입니다.
animation-duration: 1.5s;은 글자가 오른쪽에서 왼쪽으로 1.5초만에 오겠다는 것입니다.
천천히 오기를 희망하신다면 3이나 4나 5나 그 이상이라도 원하시는 초를 입력하시면 됩니다.
animation-name: slidein; 이것은 아래 @keyframes의 개별 이름입니다.
@keyframes slidein 이렇게 사용하시면 되구요.
keyframes의 이름을 다르게 주고싶으면 slidesir 또는 a라고 하셔도 됩니다. 자기만 알고있으면 됩니다.
slidein2 이것은 제가 혹시나 하고 테스트 해봤는데요.
from에 font-size: 1px 을 두니 글자픽셀이 1px에서 to에 아무효과도 넣지않으니 원래 글자크기로 돌아갔습니다.
쉽게말해서, from에 넣은 스타일로 시작해서 to에 넣은 스타일로 끝나는 것이지요.
width: 300% 이것은 300%의 위치에서 기존에 위치한 100%자리로 돌아오게끔 하기위해 300%자리부터 시작하는것입니다.
★ @keyframes slidein은(는) 우측에서 좌측으로 이동하는 애니메이션이구요.
★ @keyframes slidein2는(은) 글자폰트가 1px에서 기존 글자크기로 돌아가는 애니메이션입니다.
허접한 초보자의 팁이지만, 유용하게 사용하시길 바랍니다.
추천
1
1
댓글 0개