Animate CSS - Correct syntax?

Asked

Viewed 65 times

1

I’ve tried several ways to adjust the simple animation of a css @keyframes I’m doing. I’ve seen several syntaxes and I still have 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 I’m going wrong ?

css css3 keyframes

  • The element has no background

  • What do you mean by error? What appears to you?

  • Include html in your question.

  • @dvd the element eh an edge of type "airmail", because I want to give movement to it and I can’t move it.

  • <div id="subscribebox" class="subscribebox edge"> ... content .... </div>

  • I noticed, but he’s not a background

  • Your code will never work because you’re animating the background not the edge...

  • @hugocsl any suggestions ? I can turn a border-image into a background ?

  • Yes I’m coming up with an answer

  • Really that the answer from Ugo got better? It’s not for nothing no, just wanted to know, even for me to learn too.

  • @dvd, no, I’m using your model, so much so that it looks really cool on my model here to which I’m applying.

  • @dvd, I am now working on how a div to which I have (Hover) can stay over that edge. If you have any suggestions, thank you.

Show 7 more comments

2 answers

3


Move the 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 that you want and cheer him up.

The interesting thing is that it is all self-adjusting. You don’t need to touch anything unless you want to adjust the widths etc.

I also created a div internal to 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>

  • 90 seconds! D

  • 1

    Yeah, it was too big, too small :)

  • @dvd, the problem I’m facing now is, where you put Text, More Text, there I have a div (Hover) that goes over the edge. That’s the only problem I’m facing right now, the rest stayed on show.

  • @dvd where I add the print here ?

  • Edit the question, insert the image anywhere in the question, go to the end of the question text that will have the image link... copy this link and then cancel the edit

  • https://i.stack.Imgur.com/A3qat.jpg

  • That, it’s an internal div, because when I pass the mouse pointer on top, that ballad appears, but it’s cutting, because it’s an internal div. If you look at the upper left and right corners, you will see additional buttons that I put, and these are outside the text div that you put in your template (Text, more text). I’m picking up with the internal div positions (red balao).

  • This div with the edge is closed, there is no way to put anything inside it that comes out. You will have to do it outside it.

  • I thought this could be done, because the most I could do was do as I did with the example below in my restricted area of my site .... patience !!! https://i.stack.Imgur.com/c4yN3.jpg

  • But you can do it. It’s just you put everything inside a div and do the Hover in this div. Then you position the balao as you want on top.

  • Hover in the outermost div ?

  • Let’s go continue this discussion in chat.

Show 7 more comments

2

Follow the model, left commented where you control the width of the lines, just do not to put one of each color pq the effect does not work with repite-linar but like the linear-gradiente normal.

OBS: doesn’t need Animated.css for this, just make a simple animation of background-position with @kayframes even

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

  • Show ! worked a lot the two codes! Thank you @dvd for days I was trying to come up with something, but I would never think it would work with pseudo-class. I’m only picking up now over a transparent div over the animated border, when I do the Hover in the text ( inside the text class) because the Hover image is cut precisely by the size of the border div.

  • @Eitaehnoiz face post a young new question! Just as the code in the comments is not cool and also does not answer you right or post examples as we did or anything.... Open a new question that is no problem, always have someone willing to help!

  • 1

    OK ! I’ll do ...

Browser other questions tagged css css3 keyframes

You are not signed in. Login or sign up in order to post.