Javascript, Jquery or css3 oscilating letter animation

Question

나는 자바 스크립트와 특히 애니메이션에서 유용합니다. 나를위한 도전은 양쪽에서 최대 30도 전후로 편지를 오실 레이션하게 만드는 것입니다. 내가 업로드 한 그림은 애니메이션의 예입니다. 편지는 오른쪽 상단 모서리 나 핀에서 옮길 것입니다. 그러나 나는 그것이 더 힘들다고 생각합니다. 누구든지 답장을 보내 주면 도움이 될만한 지침이 필요합니다. 사전에 덕분에

내가 그래서 여기에 이미지를 게시 할 수 없습니다 새이기 때문에 링크입니다 : http://i.stack.imgur.com/byzUC.png

Answer 1

음, 여기까지 더 이상 내가 인정하는 걱정보다 갔고, 내 자신부터 제한 (만 신뢰할 수있다 테스트) 우분투 11.04에서 Chromium 12+ 및 Firefox 5+ (은 Opera 11에서 작동하지 않음). 그렇기 때문에 필자는 Firefox와 Chromium에 대한 발췌 부분 만 보여줄 것입니다. 링크 된 JS Fiddle에는 최소한 Opera에 시도 할 수있는 공급 업체 접두어가 있습니다 (실패하더라도). 다음과 같은 마크 업을 사용 : 당신이 당신의 환경에 적응하기 위해

이

<img src="http://i.stack.imgur.com/byzUC.png" id="envelope" /> 

다음 CSS는 (무한) 진동 봉투를 생성합니다

#envelope { 
-webkit-animation-name: oscillate; 
-webkit-animation-duration: 10s; 
-webkit-animation-iteration-count: 10; 
-webkit-animation-direction: infinite; 
-moz-animation-name: oscillate; 
-moz-animation-duration: 10s; 
-moz-animation-iteration-count: 10; 
-moz-animation-direction: infinite; 
} 

@-webkit-keyframes oscillate { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -webkit-transform-origin: 108px 23px; 
    } 
    33% { 
    -webkit-transform: rotate(15deg); 
    -webkit-transform-origin: 108px 23px; 
    } 
    100% { 
    -webkit-transform: rotate(-20deg); 
    -webkit-transform-origin: 108px 23px; 
    } 
} 

@-moz-keyframes oscillate { 
    0% { 
    -moz-transform: rotate(0deg); 
    -moz-transform-origin: 110px 26px; 
    } 
    33% { 
    -moz-transform: rotate(15deg); 
    -moz-transform-origin: 110px 26px; 
    } 
    100% { 
    -moz-transform: rotate(-20deg); 
    -moz-transform-origin: 110px 26px; 
    } 
} 

JS Fiddle demo.

이 접근법의 놀라운 실패율을 감안할 때 (오페라 11에서는 제대로 작동하지 않으며 IE에서 아무 것도 얻지 못할 것이라고 상상할 수 있습니다 ...) 간단하고 간단한 브라우저 호환성.