CSS3回転の楕円軌道を達成

CSS3回転の楕円軌道を達成

結果を実現

X及びY軸は、矩形に移動します

斜めの動きを実行します。

 

1  .ball {
 2      位置：絶対。
3      アニメーション： 
 4        animX 2sが、無限の代替線形
 5        animY部2sが無限代替線形
 6    }
 7  @keyframes animX {
 8        0％を{左：0PX ;}
 9      100％ { 左：500pxなど ;}
 10  }
 11  @keyframes animY {
 12        0 ％{トップ：0PX ;}
 13      100％{ トップ：300ピクセル ;}
 14  }

 

遅延のアニメーション化

Y軸は、ダイヤモンド形の軌道に、アニメーションの長さの半分の遅延が設けられています

1  .ball {
 2      アニメーション： 
 3        リニア0 2S animX無限代替、
 4        リニア-1,2 2S animY無限交互
 5    }

立方ベジェ曲線を設定します

1  .ball {
 2      アニメーション： 
 3        立方ベジェ2S animX（0.36、0、0.64、1）無限の代替を-1,2、
 4        立方ベジェ（0.36、0、0.64、1）0無限代替2S animY
 5    }

ズームインズームアウト

固体追加見えるようにscaleプロパティを、スケールのアニメーション時間は、XとY軸の合計でなければなりません

 1  .ball1 {
 2     animation: 
 3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
 4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
 5       scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
 6   }
 7  @keyframes scale {
 8  
 9     0% {
10       transform: scale(0.7)
11     }
12     50% {
13       transform: scale(1)
14     }
15     100% {
16       transform: scale(0.7)
17    }
18  }