IEでcssアニメーションが動かないです。

前提・実現したいこと

IEでcssアニメーションを動かしたいです。

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

CSSでアニメーションをつけていますが、IE11ではアニメーションが動かなくて困っています。
chromeやMacのブラウザでは大丈夫でした。

該当のソースコード

htmlのpタグに以下のcssをつけています。

<p class="swing">動かす文字</p>

css
1
2.swing {
3    animation-name: swing;
4    animation-duration: 2s;
5    animation-delay: .45s;
6    animation-iteration-count: infinite;
7
8    -webkit-animation-name: swing;
9    -webkit-animation-duration: 2s;
10    -webkit-animation-delay: .45s;
11    -webkit-animation-iteration-count: infinite;
12
13    -ms-animation-name: swing;
14    -ms-animation-duration: 2s;
15    -ms-animation-delay: .45s;
16    -ms-animation-iteration-count: infinite;
17}
18
19@keyframes swing {
20    0%,100% { 
21        transform-origin: bottom center; 
22    }
23    10% { transform: rotate(-7deg); }  
24    20% { transform: rotate(5deg); }
25    30% { transform: rotate(-2deg); }   
26    40% { transform: rotate(1deg); }    
27    50% { transform: rotate(0deg); }
28    60% { transform: rotate(0deg); }
29    70% { transform: rotate(0deg); }
30    80% { transform: rotate(0deg); }
31    90% { transform: rotate(0deg); }
32    100% { transform: rotate(0deg); }
33}
34
35@-webkit-keyframes swing {
36    0%,100% { 
37        transform-origin: bottom center; 
38    }
39    10% { transform: rotate(-7deg); }  
40    20% { transform: rotate(5deg); }
41    30% { transform: rotate(-2deg); }   
42    40% { transform: rotate(1deg); }    
43    50% { transform: rotate(0deg); }
44    60% { transform: rotate(0deg); }
45    70% { transform: rotate(0deg); }
46    80% { transform: rotate(0deg); }
47    90% { transform: rotate(0deg); }
48    100% { transform: rotate(0deg); }
49}
50
51@-ms-keyframes swing {
52    0%,100% { 
53        transform-origin: bottom center; 
54    }
55    10% { transform: rotate(-7deg); }  
56    20% { transform: rotate(5deg); }
57    30% { transform: rotate(-2deg); }   
58    40% { transform: rotate(1deg); }    
59    50% { transform: rotate(0deg); }
60    60% { transform: rotate(0deg); }
61    70% { transform: rotate(0deg); }
62    80% { transform: rotate(0deg); }
63    90% { transform: rotate(0deg); }
64    100% { transform: rotate(0deg); }
65}

試したこと

記述する場所をhtml内にしたりしましたが、ダメでした。

アドバイスいただいて、ベンダープレフィックスを修正しました。
ここを参考にしました。
http://www.htmq.com/css3/animation-name.shtml
しかしダメでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2019/02/04 02:26

コードはマークダウンのcode機能を利用して提示してください。

m.ts10806

2019/02/04 02:27

> -webkit- 上記、意味分かってつけていますか？

donkuri

2019/02/04 02:39

ありがとうございます。調べてやってみます

k_fujimoto

2019/02/04 02:42

mts10806さんもおっしゃっていますが、ベンダープレフィックスを理解されていない可能性があります。 http://www.htmq.com/csskihon/603.shtml そちらが適切に記述されても直らなければ別の箇所に原因があると思われますので、その際はhtmlのコードなども提示されると良いかもしれません。

donkuri

2019/02/04 02:52

ありがとうございます。ベンダープレフィックスを修正しましたが、ダメでした。。

donkuri

2019/02/04 02:55

すみません。IEのキャッシュをクリアしたら動きました！ベンダープレフィックスが原因だったみたいです。