css 変換 変換

高洛峰
リリース: 2016-11-17 14:11:23
オリジナル
1247 人が閲覧しました

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 = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        addEnd(this,function(){
            count += 20;
            oHome.style.transform = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        })
    }
    function addEnd(obj,fn) {
        obj.addEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
        obj.addEventListener(&#39;transitionend&#39;,fn,false);
    }
</script>
</body>
</html>
ログイン後にコピー

css 変換 変換

transform:deformation

rotation:rotate():degree

skew:skew():degree

skewX

skewY

のy軸位置を繰り返し変更します。スケール:scale():正の数、負の数、小数

scaleX

scaleY

Displacement:translate():CSSでサポートされているすべての単位が使用可能

translateX

translateY (2)rotate(50deg);まず回転してからスケーリングを実行します

上記の変換の値も中心点(変換元)に応じて変化します

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート