css 애니메이션 > 그누보드5 팁자료실

그누보드5 팁자료실

css 애니메이션 정보

css 애니메이션

첨부파일

example.php (461byte) 100회 다운로드 2017-06-19 02:34:16

본문

저는 의뢰인께서 슬라이드의 폰트에 애니메이션을 추가하길 원해서 검색을 하여 적용 하였습니다.
하지만 그렇게 멋지고 우아한 기능을 자바스크립트나 방대한 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

댓글 0개

전체 2,431 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT