Boost up » Blog Archive » CSSアニメーションで、keyframesをjsから扱う
い・ろ・は・すのみかん風味のやつ、『温州(うんしゅう)みかんエキス入り』だけど『無果汁』って、いったいみかんのどんなエキスが入ってるんだよ？ 前回作ったコンテンツスライダーのアニメーションは、縮小アニメーション→回転アニメーション→拡大アニメーションという3つの動作を、transitionendイベントを利用してjavascriptで繋げていたのですが、CSSアニメーションにはキーフレームアニメーションという方法もありまして、こちらを利用すれば先の動作を以下のように一連の動作をCSSのみで設定することができます。 #hoge:hover { animation:anime-name 2s linear; } @keyframes anime-name { 10% { "transform:scale(0.75) rotateY(0deg); } 90% { "transform:scal
keyframesをJavaScriptで制御: JavaScriptメモ
createElementでstyle要素を作成することでkeyframesのアニメーションをJavaScriptで動的に生成できる。 var main01main = [ "0% {left:100px}", "50% {left:200px}", "100% {left:300px}" ]; var cssAnimation = document.createElement('style'); cssAnimation.type = 'text/css'; var rules = document.createTextNode('@-webkit-keyframes main01main {'+ main01main.join(" ")+ '}'); cssAnimation.appendChild(rules); document.getElementsByTagName("head
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS keyframes の Javascript による動的な書き換え - jsdo.it - Share JavaScript, HTML5 and CSS
