IE11 CSSアニメーションが動かない

Question

firefox,chrome,edgeは正常に動くのですが、
IE11だけcssアニメーションが動きません

前提・実現したいこと

IE11での実装

発生している問題・エラーメッセージ

エラーは特に出ていません

該当のソースコード

#works .hero_page .hero_item figure:nth-of-type(1) {
    position: absolute;
    top: 117px;
    right: 300px;
    width: 185px;
    -webkit-animation: 1.5s ease 0s 1 normal none animation;
            animation: 1.5s ease 0s 1 normal none animation;
  }
  @-webkit-keyframes animation {
    0% {
      -webkit-transform: translate(-40px, -40px);
              transform: translate(-40px, -40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
      opacity: 1;
    }
  }
@keyframes animation {
    0% {
      -webkit-transform: translate(-40px, -40px);
              transform: translate(-40px, -40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
      opacity: 1;
    }
  }

試したこと

・ベンダープレフィックスをつける
msもつけてみましたけどダメでした。
・ショートハンドではなく個別に書いてみる

何か不足している、または余計なものがあるのでしょうか
どうかお力をお貸しください、よろしくお願いいたします。

Answer 1

IEバグリストと解決方法を載せているサイト見つけて
その中に解決方法がありました！！

https://qiita.com/sawadays0118/items/bd0731878e9eb49c03f5

「@media以下にcss animationの@keyframesを指定すると動作しない。」

まさにこれでした。

ー解決策ー
media type（@mediaルール）の外部で@keyframesを定義することで解決しました。

質問には@mediaまで記述していなかったのですが、
まさかこれが関係しているとは思いませんでした。

今後質問するときも、もっと注意して質問すべきですね。