複数オブジェクトの書き方の原則 css3ループアニメーション case_html/css_WEB-ITnose

h5 ページを作成するとき、多くの CSS3 アニメーションを作成する必要があることがよくあります。複数のオブジェクトの同じアニメーション効果や、同じペースで保存されることに遭遇したことがありますか?原理は単純な移行と修正にすぎませんが、もう少し複雑なことになると、我慢できないので、原理を噛み砕いて分析することしかできません。次に、最初にケースを見て、次に原理を理解しましょう

css3 アニメーション ループのケース

ケース 1: アニメーション効果の読み込み

html コード:

<div class="spinner">  <div class="rect1"></div>  <div class="rect2"></div>  <div class="rect3"></div>  <div class="rect4"></div>  <div class="rect5"></div></div>

css スタイル:

<style>    .spinner {  margin: 100px;  width: 50px;  height: 60px;  text-align: center;  font-size: 10px;} .spinner > div {  background-color: #67CF22;  height: 100%;  width: 6px;  display: inline-block;     -webkit-animation: stretchdelay 1.2s infinite ease-in-out;  animation: stretchdelay 1.2s infinite ease-in-out;} .spinner .rect2 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;} .spinner .rect3 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;} .spinner .rect4 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;} .spinner .rect5 {  -webkit-animation-delay: -0.8s;  animation-delay: -0.8s;} @-webkit-keyframes stretchdelay {  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }    20% { -webkit-transform: scaleY(1.0) }} @keyframes stretchdelay {  0%, 40%, 100% {     transform: scaleY(0.4);    -webkit-transform: scaleY(0.4);  }  20% {     transform: scaleY(1.0);    -webkit-transform: scaleY(1.0);  }}</style>

ケース2：円形の拡大または還元の荷重効果

htmlコード：

rreee

csssスタイル：

<div class="spinner">  <div class="double-bounce1"></div>  <div class="double-bounce2"></div></div>

上記の2つのケースを読んだ後、複数のオブジェクトがループアニメーションであることを知っています。また、アニメーション遅延を使用すると、複数のオブジェクトが一貫したモーション効果を維持できることもわかりますが、アニメーションと遅延を見ても、それをどのように設定するかはまだわかりません。オブジェクトがどのフレームに配置されているかを想像できるかもしれません。確かに、私は分析をしているときにこう思いました。

css3 アニメーション ループの原理

これを明確に説明するには、まずいくつかの確率 (パラメーター)、アニメーション期間 t1、各オブジェクトの遅延時間差 t2、オブジェクトの数 n

t2 = t1/n

を知る必要があります。

キーフレームの平均パーセンテージは 100%/n です

上記の点を明確に理解した後、実際に複数のオブジェクト ループを記述する方法を知る必要があります。例:

html コード:

.spinner {  width: 60px;  height: 60px;   position: relative;  margin: 100px;} .double-bounce1, .double-bounce2 {  width: 100%;  height: 100%;  border-radius: 50%;  background-color: #67CF22;  opacity: 0.6;  position: absolute;  top: 0;  left: 0;     -webkit-animation: bounce 2.0s infinite ease-in-out;  animation: bounce 2.0s infinite ease-in-out;} .double-bounce2 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;} @-webkit-keyframes bounce {  0%, 100% { -webkit-transform: scale(0.0) }  50% { -webkit-transform: scale(1.0) }} @keyframes bounce {  0%, 100% {     transform: scale(0.0);    -webkit-transform: scale(0.0);  } 50% {     transform: scale(1.0);    -webkit-transform: scale(1.0);  }}

css コード:

      <ul>          <li class="on1"></li>          <li class="on2"></li>          <li class="on3"></li>          <li class="on4"></li>          <li class="on5"></li>          <li class="on6"></li>      </ul>

この例は実際には 6 つのオブジェクトのループ アニメーションです。毎回 100%/16 ポイント、つまり 16.7%、33.4%、50.1%、66.8%、83.5、100.2% で異なるオブジェクト変更エフェクトを制御するだけです。 （割り切れないので余分な部分があるのでおおよそです）

さらに、要素が最初から動き始めるのを見たいので、この 16.7% 前置詞を割る必要があり、すると

となります。

        ul{list-style:none;padding:0;margin:0;}        ul>li{            width:50px;            height:50px;            margin-bottom:20px;            background:orange;            -webkit-animation:scale 3s linear infinite;        }        .on2{            -webkit-animation-delay:0.5s;        }        .on3{            -webkit-animation-delay:1s;        }        .on4{            -webkit-animation-delay:1.5s;        }        .on5{            -webkit-animation-delay:2s;        }        .on6{            -webkit-animation-delay:2.5s;        }        @-webkit-keyframes scale{            0%,33.4%{width:50px;height:50px;}            16.7%{width:80px;height:80px;}        }

結局、よく分からない場合は、もう少し例をあげてください、もっと考えればわかると思います。

CSS3 アニメーションに関するより良い記事をいくつか残してください:

経験の共有: マルチスクリーンの複雑なアニメーションのための 3 つの CSS テクニック

姿勢を改善しましょう! CSS3アニメーションフレーム数の科学的計算方法

【オリジナル】モバイルWebアニメーションデザインの経験??css3で実行を実現

      @-webkit-keyframes scale{            0%,33.4%{width:50px;height:50px;}            16.7%{width:80px;height:80px;}        }