画像をクリックしたら動き出す…といったアニメーションを作りたいと思った時は「jQueryやJavaScriptを使う」といった方法が定石だろうとは思いますが、CSSだけでも作れそうでしたので、試してみます。
input:checkedを使う
input:checkedを使うことで、チェックボックスがON・OFFの場合、という使い方ができます。具体的には下記のような感じです。
<input class="btn01" type="checkbox">そうすると、チェックボックスが表示されます。
非表示にしてもよかったのですが、今回は分かりやすいように表示させておきます。
:checkedを隣接の＋（プラス）で連結する
input:checked+.char01{}といった感じで、画像のクラスと連結させます。
input:checkedとすることでチェックボックスにチェックが入っている時、という条件を作ることができるので、チェックを入れたときだけ隣接している画像が動き出すようになります。
HTML部分はこちらです。
<input class="btn01" type="checkbox">
<img class="char01" src="https://css.eguweb.tech/wp-content/uploads/123.gif">CSS部分はこちらです。
.btn01{
position:absolute;
}
input:checked+.char01{
position:absolute;
animation-name:move;
animation-duration:20s;
animation-timing-function:linear;
animation-fill-mode:forwards;
}@keyframesで動かす
あとは、今まで何度も使ってきましたが、@keyframesを使ってアニメーションをします。
@keyframes move{
0%{
left:0;
}
100%{
left:80%;
}
}これで、animation-name:move;と一致するので、チェックを入れたタイミングでアニメーションが開始されます。
▼サンプルページはこちら
CSS
css.eguweb.tech
まとめ
まさか、こんな方法があったのか…！という感じです。
色々な方法がありますね…！日々勉強です😃
