WEB-RSS2.0ATOM1.0さすらいのWeb制作家、MAKOCHINがつづるブログサイト。Web制作に関する知識を備忘録的に書いているだけのサイトです。ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。ご興味のある方はどうぞ。さすらいのWeb制作家。Web制作の修行に勤しむ毎日を過ごす。【CSS3】アニメーションさせる(@keyframes、animation-name)TweetPocketCSS3でアニメーションを行う方法をご紹介します。@keyframesで指定したアニメーションの過程をanimation-nameプロパティで指定して実行することでCSSでアニメーションを行うことが出来ます。font-size:30px;}【使用例(html)】アニメーションします(1)キーフレームでアニメーションの過程を指定します。過程を%で指定して、そのときの状態を指定します。使用例では名前を「movie」として、0%(始点)のときに左の位置を0px、文字の色を赤、100%(終点)で左の位置が300px、文字の色が青になるような過程を指定しています。(2)animation-nameで実行するキーフレームを指定します。※現在ではSafari、Chromeのみ実装されており、ベンダープレフィックス「-webkit-」を付けて利用します。※時間は秒(s)、ミリ秒(ms)で指定します。cssコメントを残す返信をキャンセルする。