Skip to main content
Quem realizou a pergunta respondeu a um questionamento de mais detalhes pedindo o HTML. E o mesmo inseriu na resposta e não editou a pergunta inserindo o HTML.
Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Quem realizou a pergunta respondeu a um questionamento de mais detalhes pedindo o HTML. E o mesmo inseriu na resposta e não editou a pergunta inserindo o HTML.
Fonte Link

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 ?

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;
    }
}

onde estou errando ?

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;
    }
}
<div id="subscribebox" class="subscribebox borda">
... conteudo ....
</div>

onde estou errando ?

título editado
Link
Leandro Angelo
  • 9,4mil
  • 3
  • 23
  • 35

ANIMATE Animate CSS - SINTAXE CORRETASintaxe correta?

adicionou 86 caracteres ao conteúdo
Fonte Link
Laerte
  • 22,8mil
  • 19
  • 86
  • 130
Carregando
Fonte Link
user33011
user33011
Carregando