주말에 테스트겸. css3 animation 좀 해봤습니다.
원래는 초기 구상은 html5와 css3 테스트겸 자랑겸 블로그를 만들까 하는 생각에 좀 테스트를 해봤습니다. 원래는 시계를 만들려구 했는데. 구상했던 모양이 안나와서 일단 다른 모양을 생각해보기로 하고 테스트 버전을 올려봅니다.~
테스트는 사파리 기반으로 했구요~~ 확인 해보실 분은 사파리를 받으셨야합니다.. 파이어폭스에선 테스트를 안해봤지만. css에 -webkit- 를 다른것로 바꿔야 합니다. 하지만 저는 단어가 기억이 안나서 패스~~ㅋㅋ
화면은 간단합니다. 제가 몇가지 테스트를 하느라 약간 틀리게 동작할수도 있긴하지만. 숫자가 들어있는 박스들이 원을 그리면서 있고 시,분,초에 맞게 원이 회전을 하는거죠... 현재시간은 당연이 안맞죠~~ 별도에 자바스크립트 작업을 해야하닌깐요~ㅎㅎ
사용된 css3관련 속성들은.(사파리 기준)
-webkit-transform-style (http://www.w3.org/TR/css3-3d-transforms/)
-webkit-animation (http://www.w3.org/TR/css3-animations/)
-webkit-border-radius
-webkit-transform (http://www.w3.org/TR/css3-3d-transforms/)
@-webkit-keyframes
요렇게 있구요.
transform-style - flat : 2D렌더링 | preserve-3d : 3D렌더링 (정확하지 않음.)
animation :
animation-name : keyframes 이름.
animation-duration : 동작 시간.
animation-timing-function : 음....... 효과정도라고 해야하나...ㅎㅎㅎ
animation-iteration-count : 동작횟수 (숫자 또는 infinite(무한))
(합쳐서 사용 하기 - animation: spin 43200s infinite linear;)
border-radius : border 라운딩
transform: 줌인 아웃, 회전......
keyframes : 애니메이션에서 사용된는건데 진행 퍼센트에 따라 다양한 애니메이션을 주는거~ㅎㅎㅎ
대충 설명 끝~~~ ㅋㅋ
아.... 전공 관련 포스팅 했다........ㅜㅜ 이게 내인생이란 말인가........... 떡밥을 뿌렸으닌간 사람이 모여들려나...ㅋㅋㅋㅋㅋㅋ
덧글