transition: トランジション プロパティ
transition-property は、トランジション効果を設定する CSS 属性の名前を指定します。デフォルトは、次のように記述できます。
transition-duration は、トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します
。 transition-timing-function: デフォルトeasetransition-delivery : 遅延時間
ease: 徐々に遅くする
linear: 均一速度
ease-in: 加速する
ease-out: 減速する
ease-in-out: 最初に加速するそして減速します
cubic-bezier: ベジェ Er 曲線
Transitionend: オーバー完了イベント
function addEnd(obj,fn){ obj.addEventListener('WebkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false); } function removeEnd(obj,fn){ obj.removeEventListener('WebkitTransitionEnd',fn,false); obj.removeEventListener('transitionend',fn,false); }
注: 1. トランジションでは、複数記述した場合、スタイルを変更せずにイベントが 1 回トリガーされます
2. transitionend イベントを繰り返しトリガーすることに注意してください。例えば、以下はdiv
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;} </style> </head> <body> <div id="nav"></div> <script> var oHome=document.getElementById("nav"); var count = 10; oHome.onclick = function(){ count += 20; oHome.style.transform = 'translate(0,'+ count +'px)' addEnd(this,function(){ count += 20; oHome.style.transform = 'translate(0,'+ count +'px)' }) } function addEnd(obj,fn) { obj.addEventListener('WebkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false); } </script> </body> </html>
transform:deformation
rotation:rotate():degree
skew:skew():degree
skewX
skewY
のy軸位置を繰り返し変更します。スケール:scale():正の数、負の数、小数
scaleX
scaleY
Displacement:translate():CSSでサポートされているすべての単位が使用可能
translateX
translateY (2)rotate(50deg);まず回転してからスケーリングを実行します
上記の変換の値も中心点(変換元)に応じて変化します