iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法

2008/8/13 水曜日 Posted in iPhone | No Comments »

iPhoneはJavaScriptを使わなくても、CSSのみでアニメーションができるようです。 今回はその方法をご紹介します。 サンプルとして、ボタンを押すと赤い四角が右にツーっと動く、というものを例に解説しようと思います。 この赤い四角が 「move right」ボタンを押すことで、右にアニメーションします   サンプルのHTMLは次の通りです。 <html> <head> <meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" /> <style type="text/css"> .slide { -webkit-animation-name: "slide-right"; -webkit-animation-duration: 2s; } @-webkit-keyframes "slide-right" { from { left: 10px; } to { left: 190px; } } </style> <script type="text/javascript"> function slideStart() { document.getElementById("target").className = "slide"; document.getElementById("target").style.left = '190px'; } </script> </head> <body> <input type="button" name="hoge" ... Read more..