CSS アニメーションを勉強する
まずは。
学ぶ
- CSS Animation for Beginners
- いい感じのボリュームで、デモイメージなんかもありつつシンプルにまとまってる
- CSS アニメーション - CSS | MDN
- いつもの
動きをイメージする
デモを見たり簡単な方法でアニメーションを動かしながら、作りたいものをイメージする。
- Animate.css
- サイトを見るだけでも、アニメーションの名前と動きを覚えるのに役立つ
- CSS3 Keyframes Animation Generator
- ジェネレーターを使って、アニメーションを作りながら動きを確認できる
- Learn CSS Animation
- CSS アニメーションが使われてるサイトを見る（これが良いかどうかは知らん）
リファレンス
CSS Element Queries
レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか？
気になった。メディアクエリーはビューポートを基準にスタイルを変化させるのに対し、エレメントクエリーは要素の幅や高さ、数に対してスタイルを変化させる。
パッと思いついた使いみちは、横並びのリストで中の要素の数が増えたときに nth-child とかで行を一段落とすとか、要素の高さが狭いときはボックス内にスクロールつけるとか、そんな感じ。
すでに発表してる人もいた。
CSS Element Queries
CSS の仕様ではないとのこと。
EQCSS については別の記事もあった。
[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS
デモも多めなので、エレメントクエリーがどんなふうに使えるか把握しやすい。
（未解決）CSS のカウンターを降順に並べる
CSS のカウンターで要素を降順にする方法調べてたけど良いのが見つからなかった。
ここの「Counting Backwards!」のような方法で counter-reset にリストの総数（これが開始番号になる）を指定して、counter-increment で 1づつ引いていけばもちろん降順に並べること自体は可能。
でも、これをすると何のためにカウンターつけてるかわからなくなる。リストに項目を追加すると適当に番号をカウントしてくれるのが良いのに、追加する度に counter-reset の値を変更するのはあまり良くない。
良くないけど、他に CSS で上手いことやってる方法が見つからなかったな。
コミットメッセージの文例を探す
commit-m: GitHubコミットメッセージの文例が検索できるサービス
ちょっと前に Twitter に流れてきて、便利そうだと思って使い出してから 1週間くらいたった。そこそこの頻度で使っていて、Fix ~~ の代わりに Tweak ~~ をよく使うようになった。
少しだけ自分のコミットメッセージが改善された気がするけど、まだ怠い気持ちには勝てなくて、適当なときは Tweak で終わらせてしまうことが多いのでこれを何とかしたい。
「0」につける単位の有無で変わること
マウスオーバー時にアニメーションするリンクが、 iPhone ( iOS8 ) Safari で上手く動かないという問題に遭遇。
デモは携帯の iOS8 Safari で確認した（して）。
.link { &::after { width: 0; // <- transition: width 0.5s ease; } &:hover::after { width: 100%; } }
このようにしていた場合、iOS8 Safari で挙動を確認すると、リンクをタップしてもアニメーションだけが発生して遷移先には飛ばず、二度目のタップでようやく遷移する。PC や Android 4.0 端末のブラウザでは一度のタップで問題なく遷移する。
解決
.link { &::after { width: 0%; // <- transition: width 0.5s ease; } &:hover::after { width: 100%; } }
単位を揃えて付けるだけ。リンクをマウスオーバーしたときの width の単位をパーセントで指定しているが、マウスオーバー前の width にも同じ単位を付けておくことでこの問題は回避できる。
追記
あんまりなタイトルをそこそこなタイトルに変更。
「良いのが思いつかないんだが、まだマシであろう！」という気持ち。
僕は「 0 」に単位をつけないコーディングスタイルなので、どうしようか、えらく面倒くさいと思っている。
左から右方向に向けて下線を消す
まずは右から左
Hugo Doc で見かけたスタイル、アニメーションである。
.link { display: inline-block; } .link::after { content: ""; display: block; width: 100%; height: 1px; background-color: #000; } .link:hover::after { width: 0; transition: width 0.5s ease; }
左から右に消す
oveflow: hidden と transform: translateX(100%) を使った場合
transform: translateX(100%) は margin-left: 100% に置き換えても良い。
- Demo - oveflow: hidden, transform: translateX(100%) | JSFiddle
- Demo - oveflow: hidden, margin-left: 100% | JSFiddle
.link { display: inline-block; overflow: hidden; /* <- */ } .link::after { content: ""; display: block; width: 100%; height: 1px; background-color: #000; } .link:hover::after { transform: translateX(100%); /* <- */ transition: transform 0.5s ease; }
box-shadow を使った場合
box-shadow を使った場合、"消す" ように見せるのであれば背景色に合わせて影の色を指定しないといけない。
それと、box-shadow ではコンテンツ幅の分影を伸ばすということが出来ないのが、この作りでは何かと面倒なことになる。不揃いな幅のコンテンツにこのスタイルを適用するとアニメーションスピードがコンテンツ毎にバラついたり、何かと。
あまり良くないので、margin や transform のほうを使おう。
.link {
display: inline-block;
}
.link::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #000;
}
.link:hover::after {
box-shadow: inset 8em 0 0 #fff; /* <- */
transition: box-shadow 0.5s ease;
}
スクロールできる表の両端の装飾
スクロールできる表の作り方は http://hail2u.net/blog/webdesign/scrollable-table.html で知った。
ここでは横スクロールできる表の両端に装飾を施し、開始・終了でその装飾を打ち消すようなスタイルを表示するようにした。ただ、明日にはこのコードの仕組みを忘れてそうで怖い。無茶苦茶してる気がしないでもない。
表の両端に装飾を施し
これは table 要素の擬似要素で。擬似要素の配置をposition: absolute で行うために起点が必要だったので、table の上に div を一つ設けている。
.x-scrolling-table { position: relative; width: 100%; background-color: white; } .x-scrolling-table-inner { display: block; max-width: 100%; overflow-x: auto; table-layout: fixed; } .x-scrolling-table-inner::before, .x-scrolling-table-inner::after { ...
開始・終了でその装飾を打ち消すようなスタイルを表示
これは最初と最後の th, td の擬似要素で。
.x-scrolling-table-inner tr > th:first-child::before, .x-scrolling-table-inner tr > td:first-child::before, .x-scrolling-table-inner tr > th:first-child::after, .x-scrolling-table-inner tr > td:first-child::after, .x-scrolling-table-inner tr > th:last-child::before, .x-scrolling-table-inner tr > td:last-child::before, .x-scrolling-table-inner tr > th:last-child::after, .x-scrolling-table-inner tr > td:last-child::after { ...
もっとスマートな方法が知りたい。
