4

最終的に素敵な CSS のみのVintage Flip Clockを構成するアニメーションがいくつかあります。

基本的に、数字を 2 つの部分に分割し、2 つの部分のそれぞれを X 軸で 180° 回転させてアニメーション化します。

╔═══════╗   
║   ##  ║   
║  ###  ║   
║ # ##  ║  
║   ##  ║ 
╠═══════╣   
║   ##  ║   
║   ##  ║     
║   ##  ║     
║  #### ║   
╚═══════╝

ただし、キーフレームの無限サイクルのために、z-index に問題があります。サイクルの最後に間違った数字が上に表示されるため、短時間、間違った数字が表示されます。

アニメーションのデモ バージョンが 2 つあります (現在は webkit のみがプレフィックス付き)。

z-index が事前に宣言されている

並べ替えられたマークアップ

前者はアニメーション サイクルで z-index を使用し、後者は図の自然順序付け (したがってデフォルトの z-index) を使用します。

<div class="nr">
    <div class="top t0">0</div>
    <div class="bottom b0">0</div>
    <!-- 1 to 9 -->
</div>

キーフレームは次のとおりです (最初の例)。

.top{
    -webkit-transform-origin:50% 100%; 
    -webkit-animation-name: flipT;
}
.bottom{
    -webkit-transform-origin:50% 0;
    -webkit-animation-name: flipB;
    -webkit-transform: rotateX(180deg);
}

@-webkit-keyframes flipT {
    from{-webkit-transform:rotateX(0deg)    }
    10% {-webkit-transform:rotateX(-180deg);}
    90% {-webkit-transform:rotateX(-180deg);}
    91% {-webkit-transform:rotateX(0deg);   }
}
@-webkit-keyframes flipB {
    from{-webkit-transform:rotateX(180deg);z-index:100;}
    10% {-webkit-transform:rotateX(0deg);  }
    11% {z-index:0;}
    20% {-webkit-transform:rotateX(0deg);  }
    21% {-webkit-transform:rotateX(180deg);}
}

ちらつきの原因となるさらなるアニメーションを防ぐために、なぜそんなに奇妙に見えるのか疑問に思っている場合は、パースペクティブを低い値に変更することでこれを確認できます。

サイクルの最後に z-index 問題が発生します。また、上記のデモの 1 つにはちらつきがあります。これを修正する方法はありますか？私はこれについて頭を包むことができないようです。

@keyframe補足: CSS パネルを SCSS に切り替えるとアニメーションが再生されないため、SASS はディレクティブで窒息していますか?

4

1 に答える 1

5

どうぞ：

http://jsfiddle.net/2TAc4/

投稿された2つの組み合わせです。自然順序付けでは、それらはすべて同じインデックスを持ちます。したがって、この概念を使用して、0、1、および 2 を切り替えます。

私はそれを遅くし（大いに役立ちます）、背景色を使用してフレームの変化を確認しました。

重要な部分は次のとおりです。

@-webkit-keyframes flipT {
    from{-webkit-transform:rotateX(0deg); z-index:1;}
    10% {-webkit-transform:rotateX(-180deg);}
    90% {-webkit-transform:rotateX(-180deg);}
    91% {-webkit-transform:rotateX(0deg); z-index:0;}
}
@-webkit-keyframes flipB {
    from{-webkit-transform:rotateX(180deg); z-index: 2;}
    10% {-webkit-transform:rotateX(0deg);}
    18% {-webkit-transform:rotateX(0deg);}
    19% {-webkit-transform:rotateX(180deg); z-index: 0;}
}

最終版は次のとおりです。

http://jsfiddle.net/S6EMe/

于 2012-11-19T22:12:19.440 に答える