1

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 ?

12
  • O elemento não tem background
    – Sam
    Commented 20/06/2018 às 20:26
  • O que você quer dizer com erro? Oq aparece pra vc? Commented 20/06/2018 às 20:29
  • Inclua o html na sua pergunta. Commented 20/06/2018 às 20:30
  • @dvd o elemento eh uma borda do tipo "airmail", pois quero dar movimento para ele e não consigo movimentá-lo.
    – user33011
    Commented 20/06/2018 às 20:31
  • <div id="subscribebox" class="subscribebox borda"> ... conteudo .... </div>
    – user33011
    Commented 20/06/2018 às 20:33

2 Respostas 2

3

Movimentar o border-image quando ele não é uma imagem acho que não tem jeito. A solução que encontrei foi criar um pseudo com o border-image que você quer e animar ele.

O interessante é que ele é todo autoajustável. Você não precisa mexer em nada, a não ser que queira ajustar as larguras etc.

Criei também uma div interna para o conteúdo:

.borda {
    position: relative;
    padding: 1em;
    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;
    overflow: hidden;
}

@keyframes animated
{
    from
    {
       left: -50%; /* metade do width */
    }
    to
    {
       left: 0%;
    }
}

.borda::after{
   content: '';
   display: inline-block;
   width: 150%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   border: 20px solid transparent;    
   border-image: fill 20 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #660000 0, #660000 3em, transparent 0, transparent 4em);
   animation: animated 10s linear infinite;
   z-index: -1;
}

.texto{
   background: #fff;
   padding: 10px;
}
<div class="borda">
   <div class="texto">
      Texto
      <br>
      Mais texto
   </div>
</div>

12
  • 90 segundos! :D
    – hugocsl
    Commented 20/06/2018 às 21:48
  • 1
    É, tava grande demais, diminuí :)
    – Sam
    Commented 20/06/2018 às 21:51
  • @dvd, o problema que estou enfrentando agora é, onde vc colocou Texto, Mais Texto, ali eu tenho uma div (hover) que ultrapassa a borda. Esse é o único problema que estou enfrentando agora, o resto ficou show.
    – user33011
    Commented 25/06/2018 às 12:30
  • @dvd onde eu adiciono o print aqui ?
    – user33011
    Commented 25/06/2018 às 12:34
  • Edita a pergunta, insere a imagem em qualquer lugar da pergunta, vai no final do texto da pergunta que vai ter o link da imagem... copia esse link e depois cancela a edição
    – Sam
    Commented 25/06/2018 às 12:36
2

Segue o modelo, deixei comentado onde vc controla a largura das linhas, só não da para colocar uma de cada cor pq o efeito não funciona com repite-linar mas como o linear-gradiente normal.

OBS: não precisa de animated.css para isso, basta fazer uma animação simples de background-position com @kayframes mesmo

.borda {
  position: relative;
  width: 100%;
  height: 180px;
  background-image: linear-gradient(45deg, 
                    #660000 0, 
                    #660000 25%, 
                    transparent 25%, 
                    transparent 50%, 
                    #660000 50%, 
                    #660000 75%, 
                    transparent 75%, 
                    transparent 100%);
  /* aqui vc controla a largura das linhas */
  background-size: 60px 60px; 
  border: 2px solid #660000;
  animation: linhas 2s linear infinite;
}
.txt {
  position: absolute;
  right: 1em;
  left: 1em;
  top: 1em;
  bottom: 1em;
  background-color: #fff;
}
@keyframes linhas {
  0% {
    background-position: 0, 30px;
  }
  100% {
    /* esse valor tem que ser o mesmo da largura da linha, background-size */
    background-position: 60px, 60px;
  }
}
<div class="borda">
  <div class="txt"></div>
</div>

3
  • Show ! funcionou muito os dois codigos! Muito obrigado @dvd há dias estava tentando bolar algo, mas jamais iria achar que funcionaria com pseudo-classe. So estou apanhando agora para sobre uma div transparente por cima da borda animada, quando faço o hover no texto ( dentro da classe texto) pois a imagem do hover é cortada justamente pelo tamanho da div da borda.
    – user33011
    Commented 21/06/2018 às 17:53
  • @EitaEhNOiz cara poste uma pergunta nova jovem! Assim como o código nos comentes não fica legal e tb não da para te responder direito nem postar exemplos como fizemos nem nada.... Abra uma nova pergunta que não tem problema, sempre tem alguém disposto a ajudar!
    – hugocsl
    Commented 21/06/2018 às 18:12
  • 1
    ok !irei fazer ...
    – user33011
    Commented 21/06/2018 às 18:20

Você deve fazer log-in para responder a esta pergunta.