transform transition がIE11で効かない

transition,transform,jQueryのaddClass,removeClassを利用してサイト内でアニメーション移動を実装しているのですが、IE１１ではそれがうまく実装してくれません。

調べると-webkit-,-ms-を使用すると良いということで、それを使用して再度アップしました、
こちらのコード内のclass="maker"
で指定しているところは-ms-transition,-webit-transitionで指定したところは治りました。
しかし、それ以外のところは治りませんでした。
キャッシュも削除して検証機能で確認して、しっかりcssには-ms-,-webkit-が書かれてが変わりません。
実装は下記です。
css↓

#parts{
    position:relative;
}
.parts-back{
    width:100%;
    height:63.68vw;
}

#censor-sinpaku{
    position: absolute;
     left: 0;
  right: 2.7vw;
  margin: auto;
    top:6.38vw;
    width:30.27vw;
    height:9.93vw;
     transition-timing-function:ease-out;	
     -webkit-transition-timing-function:ease-out;
     -ms-transition-timing-function:ease-out;
	transition-duration:1s;
	-webkit-transition-duration:1s;
	-ms-transition-duration:1s;
    z-index:5;
}
.censor-sinpaku{
    transform:translateY(22.32vw);	
    -webkit-transform:translateY(22.32vw);	
     -ms-transform:translateY(22.32vw);	
}

.censor-atach{
  transform:translateY(10.65vw);	
   -webkit-transform:translateY(10.65vw);	
   -ms-transform:translateY(10.65vw);	
}
.censor-douden{
 transform:translateY(-11.24vw);
  -webkit-transform:translateY(-11.24vw);
  -ms-transform:translateY(-11.24vw);
}
#censor-atach-up{
      position: absolute;
     left: 0;
 right: -0.2vw;
    margin: auto;
    top: 19.58vw;
    width: 60.2vw;
    height: 11.17vw;
   /*width:59.2vw;*/
   /*height:10.77vw;*/
    transition-timing-function:ease-out;	
     -webkit-transition-timing-function:ease-out;	
     -ms-transition-timing-function:ease-out;	
	transition-duration:1s;
	 -webkit-transition-duration:1s;
	 -ms-transition-duration:1s;
     z-index:2;
}
#censor-atach{
      position: absolute;
     left: 0;
  right: -0.1vw;
  margin: auto;
   top:19.65vw;
   width:59.2vw;
   height:10.77vw;
    transition-timing-function:ease-out;	
     -webkit-transition-timing-function:ease-out;	
     -ms-transition-timing-function:ease-out;	
	transition-duration:1s;
	 -webkit-transition-duration:1s;
	  -ms-transition-duration:1s;
     z-index:4;
}
#censor-padd{
      position: absolute;
     left: 0;
  right: 0;
  margin: auto;
   top:32.3vw;
   width:57.71vw;
   height:7.4vw;
     z-index:3;
}

#censor-douden{
      position: absolute;
     left: 0;
  right: 1vw;
  margin: auto;
   top:43.54vw;
   width:50.21vw;
   height:6.04vw;
     z-index:1;
    transition-timing-function:ease-out;	
     -webkit-transition-timing-function:ease-out;	
     -ms-transition-timing-function:ease-out;	
	transition-duration:1s;
	 -webkit-transition-duration:1s;
	 -ms-transition-duration:1s;
}
.parts-text{
  position: absolute;
     left: 0;
  right: 0;
  margin: auto;
  top:53.36vw;
}
.parts-text-big{
    font-size:4.23vw;
    font-weight: bold;
    display: inline;
}
.parts-text-small{
    width:55.61vw;
    margin:0 auto;
    font-size:1.27vw;
    font-weight: normal;
}

.maker{
    width:100%;
     opacity : 0;
 transform: translateY(50px);
 -webkit-transform: translateY(50px);
 -ms-transform: translateY(50px);
  transition: 1s;
  -webkit-transition: 1s;
   -ms-transition: 1s;
}
.maker-open{
    opacity : 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
 
}

こちらがそこに対応するjQueryです

$(function(){
  function animation(){
    $('.maker').each(function(){
      //ターゲットの位置を取得
      var target = $(this).offset().top;
      //スクロール量を取得
      var scroll = $(window).scrollTop();
      //ウィンドウの高さを取得
      var windowHeight = $(window).height();
      //ターゲットまでスクロールするとフェードインする
      if (scroll > target - windowHeight){
          $(this).addClass('maker-open');
        // $(this).css('opacity','1');
        // $(this).css('transform','translateY(0)');
      }else {
           $(this).removeClass('maker-open');
        //     $(this).css('opacity','0');
        // $(this).css('transform','translateY(100)');
            }
    });
  }
  animation();
  $(window).scroll(function (){
    animation();
  });
});
 $(function(){
  function animation(){
     $('#censor-douden').each(function(){
      //ターゲットの位置を取得
      var target = $('#censor-douden').offset().top;
      var targetShouhin=$('#shouhin').offset().top;
      //スクロール量を取得
      var scroll = $(window).scrollTop();
      //ウィンドウの高さを取得
      var windowHeight = $(window).height();
      //ターゲットまでスクロールするとフェードインする
      if (scroll > target - windowHeight){
           $('#censor-douden').addClass('censor-douden');
             $('#censor-atach').addClass('censor-atach');
              $('#censor-atach-up').addClass('censor-atach');
//         $('#censor-douden').animate({'top':'32.3vw'},1000);
//          $('#censor-atach').animate({'top':'32.3vw'},1000);
          setTimeout(function(){
  $('#censor-sinpaku').addClass('censor-sinpaku');},1000);
         
       
      }else if(scroll < targetShouhin - windowHeight){
           $('#censor-douden').removeClass('censor-douden');
            $('#censor-atach').removeClass('censor-atach');
            $('#censor-atach-up').removeClass('censor-atach');
             $('#censor-sinpaku').removeClass('censor-sinpaku');
             
        
      }
      
     });
  }
  animation();
  $(window).scroll(function (){
    animation();
  });
});

補足
一応動くには動くのですが、下に移動するはずが、勢いよく上に移動してしまったたりとアニメーションが崩れている状況です。

ちなみにsafari,chrome,microsoft edgeでは、移動して欲しい位置に正常に動作してくれます。。。

どなたかわかる方おりましたら、ご教授お願いいいたします。

補足情報

 <section id="parts">
      <img class="parts-back pc" src="common/img/parts-back.png">
       <img class="parts-back sp" src="common/img/res-parts-back.png">
       <div class="parts-component">
         <img id="censor-sinpaku" src="common/img/censor-sinpaku.png">
         <img id="censor-atach-up" src="common/img/censor-atach1.png">
          <img id="censor-atach" src="common/img/censor-atach2.png">
           <img id="censor-padd" src="common/img/censor-padd.png">
            <img id="censor-douden" src="common/img/censor-douden.png">
         
       </div>
      <div class="parts-text text-center">
        <p class="parts-text-big text-right">テキスト</p>
        <p class="parts-text-small text-right">テキストテキストテキスト</p>
      </div>
    </section>

Lhankor_Mhy

2020/08/07 03:24

当方で試してみたところ、動作するようです。（HTMLをご提示いただいていないので、推測で用意しました）問題が再現するコードをご提示ください。

kensho-

2020/08/07 04:00

作用ですか、、 IE11ですと反応がおかしくなります、、、先ほど、htmlのコードを追加いたしました！

Lhankor_Mhy

2020/08/07 04:46

スクリプトにある、.maker が存在しないようですが、そちらは問題なく動作しているので関係ない、ということですか？

Lhankor_Mhy

2020/08/07 04:54

ご提示のコードを試してみましたが、#shouhin が存在しないためエラーになっているようです。 kensho-さんの環境では、ご提示のコード**だけ**で問題が再現しますか？

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

回答1件

いろいろ試してみたところ、単位がビューポート基準のものはおかしな振る舞いになるようです。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
8        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
9    <title>Document</title>
10    <style>
11        div {
12            transition: 1s;
13            width: 50px;
14            height: 50px;
15            background-color: silver;
16        }
17
18        .test1.x {
19            transform: translateX(50vw);
20        }
21        .test2.x {
22            transform: translateX(500%);
23        }
24        .test3.x {
25            transform: translateX(500px);
26        }
27
28    </style>
29</head>
30
31<body>
32    <div class="test1"></div>
33    <div class="test2"></div>
34    <div class="test3"></div>
35    <script>
36        $(function () {
37            $('img,div').addClass('x');
38        });
39    </script>
40</body>
41
42</html>