Help us understand the problem. What is going on with this article?

CSSで爆弾をつくる。

More than 3 years have passed since last update.

sample2.gif

実際に動作を確認したい人向け
https://jsfiddle.net/junya_5102/y8v713e4/2/

html

<div class="bomb black">
  <span class="ledge"></span>
  <div class="fuse"></div>
  <div class="dust">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <p class="msg orange">Boooooom!</p>
  </div>
</div>

CSS

.bomb{
  position: fixed;
  top: 50%;
  left: 50%;

  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100%;

  transform: translate(-50%,-50%) rotate(5deg);
}

.bomb:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100%;

  background-color: currentColor;
  box-shadow: 0 0 1px 1px black inset;

  transform: translate(-50%,-50%);

  z-index: 1;
}

.bomb:after{
  content: "";
  position: absolute;
  top: 15%;
  left: 8%;

  width: 50%;
  height: 50%;
  border-radius: 45%;
  border: 5px solid transparent;
  border-left: 5px dotted white;

  transform: rotate(30deg);
  box-sizing: border-box;
  z-index: 2;
}

/* 出っ張り */
.bomb .ledge{
  position: absolute;
  left: 50%;

  display: inline-block;
  width: 30%;
  height: 20%;
  border-radius: 15% 15% 100% 100%;
  background-color: currentColor;

  transform: translate(-50%,-25%);

  z-index: 2;
}

/* 導火線 */
.bomb .fuse{
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 99%;
  height: 99%;
  border: 3px solid transparent;
  border-top-color: #D0BAA5;
  border-right-color: #D0BAA5;
  border-radius: 100%;

  box-sizing: border-box;
  transform: translate(-15%,-75%) rotate(-20deg);

  z-index: -1;
}

.bomb .fuse:before,
.bomb .fuse:after{
  content: "*";
  position: absolute;
  right: -.55em;
  bottom: 0;

  display: inline-block;
  font-size: 1.5em;
}

.bomb .fuse:before{
  color: red;
  transform: translate(-50%,0) rotate(0);

}

.bomb .fuse:after{
  color: orange;
  transform: translate(-50%,0) rotate(30deg);
}

.bomb .dust{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%);
}

/* 画面がちらつく場合はshadowの指定数を減らすと良い */
.dust span{
  position: absolute;
  top: 50%;
  left: 50%;

  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 100%;

  background-color: blue;
  box-shadow: 
    +30px -30px 0 0 green,
    -30px +30px 0 0 purple,
    +60px +60px 0 0 pink,
    -60px -60px 0 0 red;

  backface-visibility: hidden;
  transform: translate(-50%,-50%) rotate(var(--angle)) translateY(0);

  opacity: 0;
  z-index: 2;
}

.dust span:nth-of-type(1){  --angle: 00deg;  }
.dust span:nth-of-type(2){  --angle: 30deg;  }
.dust span:nth-of-type(3){  --angle: 60deg;  }
.dust span:nth-of-type(4){  --angle: 90deg;  }
.dust span:nth-of-type(5){  --angle: 120deg; }
.dust span:nth-of-type(6){  --angle: 150deg; }
.dust span:nth-of-type(7){  --angle: 180deg; }
.dust span:nth-of-type(8){  --angle: 210deg; }
.dust span:nth-of-type(9){  --angle: 240deg; }
.dust span:nth-of-type(10){ --angle: 270deg; }
.dust span:nth-of-type(11){ --angle: 300deg; }
.dust span:nth-of-type(12){ --angle: 330deg; }

.dust .msg{
  position: absolute;
  top: 50%;
  left: 50%;

  display: inline-block;
  margin: 0;

  text-shadow: 2px 2px 0 black;
  opacity: 0;

  transform: translate(-50%,-50%);
  z-index: 3; 
}

.orange{
  color: orange;
}

.black{
  color: black;
}

/* animation */
.bomb:before,.bomb:after,
.bomb .ledge{ animation: after_exp 1s 3s steps(1,start) forwards; }

.bomb .fuse{ animation: 
    fuse_anim 3s linear,
    after_exp 1s 3s steps(1,start) forwards; 
}

.bomb .fuse:before{ animation: burning 3s linear; }
.bomb .fuse:after { animation: burning 3s linear reverse;}

.dust span{ animation: explosion 3s 3s linear; }

.dust .msg{ animation: message 3s 3s linear; }

@keyframes fuse_anim{
  49%{
    border-top-color: #D0BAA5;
  }

  50%{
    border-top-color: transparent;
  }

  100%{
    border-top-color: transparent;
    transform: translate(-15%,-75%) rotate(-200deg);
  }
}

@keyframes burning{
  to{
    transform: translate(-50%,0) rotate(360deg);
  }
}

@keyframes explosion{
  from{
    opacity: 1;
    transform: translate(-50%,-50%) rotate(var(--angle)) translateY(50px);
  }

  to{
    opacity: 0;
    transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-200px) scale(.5);
  }
}

/* 爆発後 */
@keyframes after_exp{
  to{
    opacity: 0;
  }
}

@keyframes message{
  from{
    opacity: 1;
  }

  to{
    font-size: 4.5em;
  }
}

Variables(変数)を使ったアニメーション

transformは値を維持できない

回転度数が違う要素があり回転を維持しつつアニメーションさせる場合
度数別にアニメーションを作る必要があります

E1{ transform: translate(-50%,-50%) rotate(30deg) translateX(0); 
    animation: anim1 3s linear infinite;
} 

E2{ transform: translate(-50%,-50%) rotate(60deg) translateX(0); 
    animation: anim2 3s linear infinite;
} 

E3{ transform: translate(-50%,-50%) rotate(90deg) translateX(0);
    animation: anim3 3s linear infinite;
}

@keyframes anim1{
 from{
  translate(-50%,-50%) rotate(30deg) translateY(50px);
 }
 to{
  translate(-50%,-50%) rotate(30deg) translateY(-100px);
 }
}

@keyframes anim2{
 from{
  translate(-50%,-50%) rotate(60deg) translateY(50px);
 }
 to{
  translate(-50%,-50%) rotate(60deg) translateY(-100px);
 }
}

@keyframes anim3{
 from{
  translate(-50%,-50%) rotate(90deg) translateY(50px);
 }
 to{
  translate(-50%,-50%) rotate(90deg) translateY(-100px);
 }
}

とても長くなりますし管理が大変になります。

変数を使う

変数を使えばアニメーション1つで度数別に対応が可能です

E1{ --angle: 30deg; }
E2{ --angle: 60deg; }
E3{ --angle: 90deg; }

E1,E2,E3{
  transform: translate(-50%,-50%) rotate(var(--angle)) translateX(0);
  animation: anim 3s linear infinite;
}

@keyframes anim{
 from{
  translate(-50%,-50%) rotate(var(--angle)) translateY(50px);
 }
 to{
  translate(-50%,-50%) rotate(var(--angle)) translateY(-100px);
 }
}

対応ブラウザ

※最新版で試しています。
Google Chrome, Safari , Firefox

CSS Variables を使っているので非対応だとアニメーションがうまく動作しない。
http://caniuse.com/#feat=css-variables

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away