@keyframes規則
| アニメーションの実現CSS | ||
| @keyframes | ||
| 目的 | htmlについてアニメーションを実現します | |
| 使用 | すべて | |
|
アニメーションします
|
||
<div class="animation-div">アニメーションします</div> |
||
@keyframes keyanime{
0% {
height:0px;
background-color:#67b44a;
}
100% {
height: 300px;
background-color:#dd5656;
}
}
.animation-div{
animation-name: keyanime ;
animation-duration: 3s; /* 3秒間動く */
animation-fill-mode: both;
}
|
||
仕組み
- @keyframes name によって、アニメーションの始点と終点の状態を名称nameとして指定します。
- 対象となるcssについて、animation-nameでnameを指定し、 durationで時間、fill-modeで状態を維持するかどうかを指定します。 fill-mode: bothとすれば、終了時点の状態が維持されます。
- より細かいアニメーション設定については、animationプロパティで指定します。
ボックスの表示非表示をアニメーションで実現する
CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの２つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
programming-cafe.com