css3 とは
新たに盛り込まれた仕様として、文字の縦書き（縦組み）、段組み、ルビ（ふりがな）、角を丸めた輪郭（角丸）、文字や図形の影（ドロップシャドウ）、2次元的あるいは3次元的な変形（トランスフォーム）、時間をかけた遷移・変化（トランジション）、アニメーション、
透過色、グラデーション、表示環境に応じてスタイルを切り替えるメディアクエリ（media queries）、「最初の」「n番目の」などを含む高度なセレクタ、印刷や音声を制御するためのプロパティなどがあります。
以下では主に簡単に導入できるものをまとめて紹介していきます。
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-property
trancform(時間的効果)を与えたいcssプロパティ名を指定するときに主に使用します
詳しくはコチラ
transitions-timing-function
変化のタイミング・進行割合を指定することができます 変化の割合などを設定できより滑らかなモーションを再現できます
詳しくはコチラ
transitions-duration
Transitions-durationは変化にかかる時間を指定することができます 早くしたり遅くしたりなどそれぞれ可能です
詳しくはコチラ
transition-delay
transition-delayは変化の開始時間を指定することができます マウスでホバーしてから3秒後に発動させるなど時間差を設定可能です
詳しくはコチラ
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です 同じように指定することによってアニメーションの開始時刻を設定できます
詳しくはコチラ
