CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる
CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる 更新日: 2019/10/18 公開日: 2014/10/02カテゴリー: CSS » JavaScript ドロワーをCSS3とjQueryで実装今回実装するドロワーの仕様はこんな内容です。 ボタンのタップ、クリックでドロワー表示用クラスをjQueryで付けるドロワー表示時にドロワー以外の領域もしくはボタンをタップ、クリックしたら閉じるIE9以下でのアニメーションは諦め、最低限の機能を提供するようにするプラグインを使わずに、なるべくjQueryでの処理を増やさないというコンセプトなのでHTML構造はちょっと依存します。今回ご紹介する方法で実装したドロワーのデモはこちらで確認できます。 HTML部分まず、HTMLはこのようにします。ドロワーはラッパー要素と分離します。 <body> <div id="wrapper">
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧 | DevelopersIO
