現れてから下に10px移動させてから消えるアニメーションを作りたい。

id=canonをクリックしたらid=matchが出現してcanonをめがけて10px下がってから消える
感じにしたいのですが、jqueryでtransformは未対応なので他にどんな手段を用いればいいのか
悩んでいます。

HTML5
1コード　<body id="firework">
2
3  <div id="shoot">
4     <figure class="img1"><img src="images/canon.png" alt="canon" id="canon"></figure>
5     <figure class="img2"><img src="images/machi.png" alt="machi" id="match"></figure>
6     <figure class="img3"><img src="images/firework.png" alt="firework" id="fire"></figure>
7  </div>

CSS3
1コード .firework {
2    position: relative;
3    height: 100%;
4}
5
6#canon {
7    position: absolute;
8    right: 30px;
9    bottom: 0;
10}
11
12.img2 {
13    position: absolute;
14    right: -100px;
15    bottom: 50px;
16    transform: translateY(10px);
17    transition: transform .1s;
18}
19
20.img3 {
21    position: absolute;
22    right: -30px;
23    top: 0;
24}
25#match {
26    opacity: 0;
27}
28
29#fire {
30    display: none;
31}

javascript
1コード $(function (){
2    $('#canon').on('click',function() {
3      matchin();
4    });
5    function matchin() {
6      $('#match').animate({opacity: 1},500);
7      $('#match').animate({opacity: 0},1000);
8    }
9  });

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1/*add Class*/
2
3#match {
4    -webkit-transition: .3s;
5    transition: .3s;
6}
7
8.match__fadeIn {
9    -webkit-transform: translateY(10px);
10    transform: translateY(10px);
11    opacity: 1 !important
12}
13
14.match__visibilityHidden {
15    opacity: 0 !important
16}
17

jQuery
1$(function () {
2    $('#canon').on('click', function () {
3        matchin();
4    });
5
6    function matchin() {
7        $("#match").addClass("match__fadeIn");
8        setTimeout(function () {
9            $("#match").addClass("match__visibilityHidden");
10            setTimeout(function () {
11                $("#match").removeClass("match__fadeIn match__visibilityHidden")
12            }, 300)
13        }, 300);
14    }
15});