Animate CSS - Correct syntax?

Question

Animate CSS - Correct syntax?

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I have tried in many ways to adjust the simple animation of a @keyframes css I'm doing. I have seen several syntaxes and still continue with error,

.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>

Where am I going wrong?

css css3 keyframes

asked by anonymous 20.06.2018 / 22:15

2 answers

2

The following is the model, let me commented on where you control the width of the lines, just do not put one of each color because the effect does not work with repite-linar but as linear-gradiente normal.

OBS: does not need animated.css for this, just do a simple animation of background-position with @kayframes same

.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>

20.06.2018 / 23:42

PHP builders [closed] how to use max-height and display table

score 3 · Accepted Answer

Move border-image when it is not an image I think there is no way. The solution I found was to create a pseudo with the border-image you want and to animate it.

The interesting thing is that it is all self-adjusting. You do not have to touch anything unless you want to adjust the widths etc.

I've also created an internal% content for the content:

.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>