@keyframes bounce {
    0% { color: #000; margin-top: 10px;  height: 100px; }
   50% {                                 height: 100px; }
  100% { color: #000; margin-top: 300px; height: 100px; }
}

.parent {
  display: flex;                /* display:flexを指定すると横並びになる */
}

.child {                        /* DIVで領域を指定して、そこに縦横幅を決めるだけで、絵になる    */
  border: solid 0px black;
  width: 100px;
  height: 100px;
  margin: 10px;
  border-radius: 50%;           /* border-radius は、要素の四隅の角に丸みをつける効果があるCSSプロパティです。              */
}                               /* 数値やパーセント値を指定し、その値を半径とした円の円周に沿って、角に丸みが付けられます。 */

#div1 {
  background-color: null;
  background-image: url("a-hello.png");
  animation:                    bounce;
  animation-duration:           2s;                 /* 時間                                                                                 */
  animation-iteration-count:    var(--FlagHaro);    /* 回数  var(--FlagHaro);   infinite;                                                   */
                                                    /* css変数を指定できない。すでにコロニードロップの一行をコピペしても動かない。なぜ？    */
  animation-direction:          alternate;          /* アニメーションを繰り返した場合に繰り返すたびに再生方向を逆転させることができます。   */
  animation-timing-function:    ease-in;            /* ease-in 開始時だけなめらかにする                                                     */
}

#div2 {
  background-color: lightgreen;
  animation: bounce 2s ease-in 1s infinite alternate;
}

#div3 {
  background-color: lightblue;
  animation: bounce 2s ease-in 2s infinite alternate;
}






@keyframes OpeningDouga111 {
    0% { background-position:100% 30%; background-image: url("a-ufo.gif"); }
  100% { background-position:0%   50%; background-image: url("a-ufo.gif"); }
}

#OpeningDouga1 {
  animation:            OpeningDouga111 4s, OpeningDouga222 1s 4s;
  animation-duration:   4s;                 /* 時間     */
}




@keyframes OpeningDouga222 {
    0% { height:100%; }
  100% { height:  0%; }
}

#OpeningDouga2 {
  animation:            OpeningDouga222;
  animation-duration:   1s;                 /* 時間                 */
  animation-delay:      0s;                 /* 起動までの遅延時間   */
}