KinutaHandicraft - ヒント集 - ヒントだよ！HTML & CSS -

■ CSS - その6

個人的な感想: アニメーションはGIFアニメーション、FLASH、JAVA、JAVA Scriptを使った方がいいように思います。
処理した画像はペイントソフト等で編集加工したものを用意すればいいと思います。

アニメーション関系 → アニメーションの例の表示
- @keyframesアットマーク-キーフレームス アニメーション名 {キーフレーム{変化させるプロパティ:値; }}
  →アニメーションの動きを指定する。
- {animation-nameアニメーション-ネーム:アニメーション名;}、アニメーションを識別する名前を指定する。
- {animation-durationアニメーション-ヂュレーション:時間;}、アニメーションが完了するまでの時間を指定する。
- {animation-delayアニメーション-ディレイ:時間;}、アニメーションが開始されるまでの時間を指定する。。
- {animation-play-stateアニメーション-フレー-ステート:再生状態;}、アニメーションの再生、一時停止を指定する。
- {animation-timing-functionアニメーション-タイミング-ファンクション:加速曲線;}、アニメーションの加速曲線を指定する。
- {animation-fill-modeアニメーション-フィル-モード:スタイル;}、アニメーションさいせいぜんごのスタイルを指定する。
- {animation-iteration-countアニメーション-イテレーション-カウント:再生回数;}、アニメーションの繰返し回数を指定する。
- {animation-directionアニメーション-ディレクション:再生方向;}、アニメーションの再生方向を指定する。
- {animationアニメーション:-name -duration -timing-function -delay -iteration-count -direction -fill-mode -play-state;}、
  →アニメーションをまとめて指定する。

{transiton-propertyトランジッション-プロパティ:プロパティ名;}、トランジッションを適応するプロパティを指定する。
→transiton-propertyの例を表示する
{transiton-durationトランジッション-デュレーション:時間;}、トランジッションが完了するまでの時間を指定する。
→transiton-durationの例を表示する
{transiton-timing-functionトランジッション-タイミング-ファンクション:加速曲線;}、「トランジッションの加速曲線を指定する。
→transiton-timing-functionの例を表示する
{transiton-delayトランジッション-ディレイ:時間;}、トランジッションが開始するまでの待ち時間を指定する。
→transiton-delayの例を表示する
transitonトランジッション:-property -duration -delay -timing-funciton、トランジッションをまとめて指定する。

{transformトランスフォーム:トランスフォーム関数;}、平面空間で要素を変形する。
→transformの例を表示する
{transformトランスフォーム:トランスフォーム関数;}、3D空間で要素を変形する。
{transform-originトランスフォーム-オリジン:位置;}、変形する要素の中心の位置を指定する。
→transform-originの例を表示する
{perspectiveパースペクティブ:視点の距離;}、3D空間で変形する要素の奥行きを指定する。
{transform-styleトランスフォーム-スタイル:配置方法;}、3D空間で変形するよその子要素の配置方法を指定する。
{perspective-originパースペクティブ-オリジン:視点の位置;}、3D空間で変形汁要素の視点の位置を指定する。
{backface-visibilityバックフェイス-ビジビリティ:表示方法;}、3D空間で変形汁要素の背面の表示方法を指定する。
{transform-boxトランスフォーム-ボックス:参照ボックス;}、変形の参照ボックスを指定する。

{touch-actionタッチ-アクション:操作;}、タッチ画面におけるユーザーあの操作を指定する。

{cursorカーソル:画像ポインター位置種類;}、マウスポインターの表示方法を指定する。
※それぞれの閲覧環境での表示されるマウスポインターの形状になれているのに、意図しない形状のマウスポインターが表示されても閲覧者を混乱させるだけなので、そのような場合は使わない方がいいのではないかと考えます。
→使用例を表示する

content , counter 関係 →content , counter関係の使用例
- {contentコンテント:コンテンツ;}、要素や疑似要素の内側に挿入するものを決定する。
- {counter-incrementカウンター-イングリメント:カウンター名更新値;}、カウンター値を更新する。
- {counter-resetカウンター-リセット:カウンター名リセット値;}、カウンター値をリセットする。
{quotesクォーツ:開始記号終了記号;}、contentプロパティで挿入する記号を指定する。
→quotesの例を表示する

{will-changeウィル-チェンジ:変化;}、ブラウザに対して変更が予測される要素を指定する。

{object-fitオブジェクト-フィット:表示方法;}、画像などをフィットさせる方法を指定する。
{object-positionオブジェクト-ポジション:位置;}、画像などをボックスに揃える位置を指定する。
※{ object-position:水平方向垂直方向 ;}など/
→数値など/top/right/botom/left/center

{pointer-eventsポインター-イベント:条件;}、ポインターイベントの対象となる場合の条件を指定する。

{allオール:状態;}、要素のすべてのプロパティーを初期化する。