はじめに

jsを使わずcssのみでモーダルを作ろうと思って作りました。
ただモーダルだけだとありふれているので、押したボタンが変形してコンテンツを表示するアニメーションをつけました。
が、これだとモーダルの定義にあってない気がするので、モーダルのようなもの、です…
当たり前のことかもしれないですけど実装にあたって気づいたことを羅列しました

作ったもの

要素をクリックするとアニメーションします。ついでにホバーアニメーションもちょっとだけつけました。

See the Pen Animation-test by mild-tanama (@mild-tanama) on CodePen.

実装方法

流れ

checkboxのcheckedを利用してコンテンツの表示・非表示を切り替える
アニメーションをつける

checkboxのcheckedを利用してコンテンツの表示・非表示を切り替える

cssのみで制御なので切り替えるにはinputタグのcheckboxかradioボタンを使う必要があります。
でもチェックボックス自体は表示して使わないので、display:noneで消しちゃいます。
labelのforでidを指定すれば、labelをクリックすればinputにcheckedが付くのでそちらを利用。
セレクタで:checkedで指定できるようになるので、そこから表示・非表示のプロパティを設定します。

.modal-btn:checked + label {
  animation: spin 1s ease forwards;
  width: 300px;
  height: 300px;
}

こんな感じにcss設定してます。

実装して気づいたこと

タグが合っていない

そもそもの話なんですけどchecked使うためとはいえinputタグを本来の意味で使っていないのが心苦しいですね。同じくlabelタグもです。
超絶軽いですが、そこは心苦しい…。

再度クリックしたときのアニメーション

コンテンツを閉じるときのアニメーションができない！
animationプロパティでは無理でしたね…（cssだけでは）
複雑なアニメーションの場合は戻す時にも他のアニメーションを用意して閉じる時にそのアニメーションを付与してあげる必要がありました。
transitionだけでどうにかなるアニメーションならば、そちらで閉じる時も同じアニメーションにできるので、cssのみで簡単にやる場合はそちらを利用するべきですね。

display:none, opacity: 0の罠

display: none; のDOMに対してtransitionを使う際の注意
これにハマってました。勉強になりました。

まとめ

タグ構造が無理やりなので気になる
複雑なアニメーションやる際はやはりjsが必要そう
簡単なモーダルとかならcssでもできる

個人的な感想としてはやっぱり実務向きではないですね。何よりも構造が悪すぎる気がします。
クラスのつけ外しで解決する話なので、このくらいならjsでちょこちょこつけ外しすれば良さそうです。
アニメーションの動作を確認するだけとかであれば、楽なのでいいですね！（hoverで良くない？というのはさておき）