animation-name- animationプロパティ プロパティ animation-name @keyframesとの関連付け 例 .box { width: 100px; height: 100px; animation-name: grow-progress; } @keyframes grow-progress { from { scale: 1 1; } to { scale: 5 5; } }

@keyframes を使う 構文 開始と終了の状態を指定する @keyframes <custom-ident> { from {}, to {} } 中間地点の状態を%で指定する @keyframes <custom-ident> { 0% {}, 50% {}, 100% {}, } <custom-ident>は、キーフレームリスト(@keyframes)の識別名。 重複していれば、最後に定義されたキーフレーム</custom-ident></custom-ident></custom-ident>…

プロパティ animation-fill-mode CSSアニメーションの実行の前後に、スタイルをどうするか 設定値 none forwards backwards both 挙動 ●下記のように指定したとき animation-delay: 3s; animation-duration: 3s; animation-fill-mode: {value} value 開始待…

枠外にはみだした文字を省略する CSS text-overflow: ellipsis;を使う display: block; max-width: 400px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; ※ブロックコンテナから、インライン方向にはみ出すケースでのみ使える ※複数行の…