Я использую анимацию @keyframes для пути в svg, но она не работает в IE10 и IE11.Я попробовал некоторые ответы, но все еще не работает.
Я не вижу детали @keyframes в обозревателе DOM браузера IE.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=11;IE=edge,chrome=1">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="2.css" />
</head>
<body>
<div width='100px' hesight='30px'>
<svg id="one" xmlns="http://www.w3.org/2000/svg" width="400px"height="200px" viewbox="0 0 200 100">
<path id="chain_st" d="m0,0 v100 h200 v-100 h-200 z"fill="transparent" stroke="green" stroke-width="1" stroke-dasharray="6" stroke-dashoffset="0"></path>
<path id="chain_st1" d="m0,0 v100 h200 v-100 h-200 z" fill="transparent" stroke="white" stroke-width="1" stroke-dasharray="6" stroke-dashoffset="6"></path>
</svg>
</div>
</body>
</html>
css:
@-webkit-keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}
@-moz-keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}
@-o-keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}
@keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}
#chain_st{
-webkit-animation: dash 120s infinite linear;
-moz-animation: dash 120s infinite linear;
-o-animation: dash 120s infinite linear;
animation: dash 120s infinite linear;
}
@-webkit-keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}
@-moz-keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}
@-o-keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}
@keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}
#chain_st1{
-webkit-animation: dash1 120s infinite linear;
-moz-animation: dash1 120s infinite linear;
-o-animation: dash1 120s infinite linear;
animation: dash1 120s infinite linear;
}
Это работаетправильно везде, кроме IE10 / 11 и сводит меня с ума.
Что я делаю не так?
Пожалуйста, помогите мне, ребята.