アットシステムとは サービス紹介 保守管理受注WEB 会社紹介

ご相談はお気軽にどうぞ。

システム開発 埼玉 お問い合わせ お問い合わせ

css3について

css3 とは

新たに盛り込まれた仕様として、文字の縦書き(縦組み)、段組み、ルビ(ふりがな)、角を丸めた輪郭(角丸)、文字や図形の影(ドロップシャドウ)、2次元的あるいは3次元的な変形(トランスフォーム)、時間をかけた遷移・変化(トランジション)、アニメーション、
透過色、グラデーション、表示環境に応じてスタイルを切り替えるメディアクエリ(media queries)、「最初の」「n番目の」などを含む高度なセレクタ、印刷や音声を制御するためのプロパティなどがあります。

以下では主に簡単に導入できるものをまとめて紹介していきます。

css3 -各ブラウザ対応表-

transform - html要素の変形、移動、回転などを指定出来ます -

transform

アットシステム

transformとは要素に変形を適用させるプロパティです transformの中にそれぞれ値が指定でき、回転、移動、収縮などがあります。

詳しくはコチラ

transform:rotate

アットシステム

trancformの中のrotateは主に回転を制御します Y軸X軸Z軸などそれぞれ設定することができます

詳しくはコチラ

transform:translate

アットシステム

trancformの中のtranslateは主に移動を制御します Y軸X軸Z軸などそれぞれ設定することができ要素の表示位置などを変更する際に便利です

詳しくはコチラ

transform:scale

アットシステム

trancformの中のscaleは主に縮尺比率を指定する際に使用します 拡大したり縮小したりなどが可能です

詳しくはコチラ

transform:skew

アットシステム

trancformの中のskewは主に傾斜比率を指定する際に使用します 斜めに傾けたりなど面白い動きが可能です

詳しくはコチラ

transform-origin

アットシステム

transform-originは基準となる変形地点を変えることが可能です 組み合わせによって効果を発揮します

詳しくはコチラ

transition - 時間的経過(時間的な変化)を指定出来ます -

transition

アットシステム

transitionとは要素に時間を指定することによって様々な効果を与えるプロパティになります

詳しくはコチラ

transition-property

アットシステム

trancform(時間的効果)を与えたいcssプロパティ名を指定するときに主に使用します

詳しくはコチラ

transitions-timing-function

アットシステム

変化のタイミング・進行割合を指定することができます 変化の割合などを設定できより滑らかなモーションを再現できます

詳しくはコチラ

transitions-duration

アットシステム

Transitions-durationは変化にかかる時間を指定することができます 早くしたり遅くしたりなどそれぞれ可能です

詳しくはコチラ

transition-delay

アットシステム

transition-delayは変化の開始時間を指定することができます マウスでホバーしてから3秒後に発動させるなど時間差を設定可能です

詳しくはコチラ

animations - html要素のアニメーションの設定出来ます -

animations

アットシステム

animationsとは要素をキーフレームアニメーション形式で動かすためのプロパティです

詳しくはコチラ

animations-name

アットシステム

animation-nameプロパティは、要素にキーフレームアニメーションを適用する場合の、 アニメーション名を指定する際に使用します

詳しくはコチラ

animation-duration

アットシステム

アニメーション一回分の時間の長さを指定します アニメーションの間隔などを設定する際に使用できます

詳しくはコチラ

animation-timing-function

アットシステム

TTransitions-timing-functionのanimationVerです こちらも同様にタイミングなどを設定できます

詳しくはコチラ

animation-iteration-count

アットシステム

アニメーションの回数を設定できます ある回数のみに指定するなど幅広く使用できます

詳しくはコチラ

animations-direction

アットシステム

animations-directionはアニメーションを交互に反転再生させるかどうかを指定します反転させることによって違和感のないアニメ―ションを実現します

詳しくはコチラ

animations-play-state

アットシステム

animations-play-stateは再生中か一時停止かを指定する際に使用します ただしほかのプロパティでも同じことができるためあまり使用されません

詳しくはコチラ

animations-delay

アットシステム

animation-delayのアニメーションVerです 同じように指定することによってアニメーションの開始時刻を設定できます

詳しくはコチラ