CSS 3ノート2

アニメーションアニメーション
アニメーション:アニメーション名時間経過モーションカーブ待ち時間再生回数逆方向再生かinfinite:alternateをループ再生alternate:逆方向再生

 animation: move 4s linear infinite alternate;

アニメーションの定義

  @keyframes move {
            from{
                left: 0;
                background-color: red;
            }
            to{
                left: 800px;
                background-color: yellow;
            }
        }

 @keyframes move {
            0%{
                left: 0;
                top: 10px;
                background-color: red;
            }
            50%{
                left: 600px;
                top:600px;
                background-color: yellow;
            }
            100%{
                left: 1000px;
                top:10px;
                background-color: green;
            }
        }

線形グラデーションlinear-gradient(方向、色1、色2、...)パラメータ:1)方向:to top bottom right left‖角度(上0 deg、右90 deg、下180 deg、左270 deg)2)色および位置

background: linear-gradient(to right bottom,red,orange,yellow 5%,green)

ラジアルグラデーションradial-gradient(形状、サイズ、中心、色1、色2...)形状:circle ellipse(デフォルト)サイズ:closest-side farthest-side closest-corner farthest-corner中心:center left right top bottom|数値(例:at center leftまたはat 10 px 10 px)色および位置

background: radial-gradient(circle ,orange,red)

伸縮レイアウトスタイルのプロパティを親ボックスに設定するには、次の手順に従います.

display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

flex:1;
flexサブプロジェクトのスピンドルでのスケールは、flexプロパティを指定しないと、伸縮配分flex-directionに関与せずにスピンドル方向を調整します(デフォルトは水平方向)
flex-direction:column垂直配列
flex-direction:row水平配列
justify-contentスピンドル位置合わせ(水平位置合わせ)の調整

flex-start------デフォルト.アイテムはコンテナの先頭にあり、親コンテナの先頭からサブエレメントがソートされますが、ボックスの順序は

に変わりません.

flex-end------親コンテナの後ろから子要素を並べ替えますが、箱の順序は

に変わりません.

center------親コンテナの間に子要素を表示する

space-between----左右の箱は親の箱に近く、中間の平均分布の空白間隔は

である.

space-around---プロジェクトは各行の前、間、後に空白を残した容器内にあり、各箱に左右marginの外距離

を追加することに相当する.

initial------この属性をデフォルト値

に設定します.

inherit------親要素から属性を継承します.

align-items側軸位置合わせ(垂直位置合わせ)を調整

stretch----デフォルト値.アイテムはコンテナに適応するようにストレッチされます.サブエレメントの高さを伸ばす親コンテナ(サブエレメントが高さを与えることなく)

を適用します.

center---プロジェクトはコンテナの中心にあり、垂直に中央にあります.

flex-start-----アイテムはコンテナの先頭にあり、垂直位置合わせの開始位置に位置合わせされます.flex-end-----プロジェクトはコンテナの最後にあり、垂直に位置し、終了位置の下に位置します.

flex-wrap制御改行するかどうか

nowrap----デフォルトです.柔軟なプロジェクトは行を分解しないか、列を分解しないことを規定します.改行しない場合、縮小(圧縮)表示強制1行内表示

wrap----柔軟な項目は必要に応じて行を分解または列を分解することを規定する.

wrap-reverse-----柔軟な項目は必要に応じて行を分解または列を分解することを規定しているが、逆の順序で

.