Já tentei de diversas formas ajustar a animação simples de um @keyframes css ao qual estou fazendo. Ja vi diversas sintaxes e mesmo assim continuo com erro,
.borda {
padding: .5em;
border: 20px solid transparent;
border-image: 20 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #660000 0, #660000 3em, transparent 0, transparent 4em);
font: 100%/1.6 Baskerville, Palatino, serif;
box-shadow: 0 0 0 3px #990000;
box-shadow: 0 0 5px rgba(0,0,0,1) inset 0 0 5px rgba(0,0,0,1), 0 0 0 2px #990000;
animation: animated 2s linear infinite;
}
@keyframes animated
{
0%
{
background-position: 0;
}
100%
{
background-position: 40px;
}
}
.borda {
padding: .5em;
border: 20px solid transparent;
border-image: 20 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #660000 0, #660000 3em, transparent 0, transparent 4em);
font: 100%/1.6 Baskerville, Palatino, serif;
box-shadow: 0 0 0 3px #990000;
box-shadow: 0 0 5px rgba(0,0,0,1) inset 0 0 5px rgba(0,0,0,1), 0 0 0 2px #990000;
animation: animated 2s linear infinite;
}
@keyframes animated
{
0%
{
background-position: 0;
}
100%
{
background-position: 40px;
}
}
<div id="subscribebox" class="subscribebox borda">
... conteudo ....
</div>
onde estou errando ?