CODEWITHSUNDEEP
csspseudo-elementanimate.css
Maurice
Maurice

Reputation: 1157

Is it posible to create the following animation in CSS3?

I have the following GIF animated file:

enter image description here

Is it possible to make this using just CSS3 and using just 1 class? I have tried the following:

  1. Have a background image with vertical stripes
  2. Move those stripes from left to right
  3. Rotate the background image 45degrees
  4. Add the same image again
  5. position it next to the previous image
  6. Use the same keyframe and rotate it 90 degrees
  7. etc etc

This is my attempt: fiddle, but I am stuck with it.

This needs to be running using just 1 class (multiple pseudo elements are allowed). I hope this is possible.

Thanks

Upvotes: 1

Views: 145

Answers (1)

vals
vals

Reputation: 64174

Here is my solution, using only one element

<div class="test">
</div>

and no images (only gradients) CSS

.test{
    position: absolute;
    width: 400px;
    height: 400px;
    left: 20px;
    top: 20px;
    border: solid 2px blue;
}

.test:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0px;
    background-image: repeating-linear-gradient(135deg, white 10px, black 20px), 
                      repeating-linear-gradient(45deg, white 10px, blue 20px);
    background-size: 120% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
     -webkit-animation: move 1s infinite linear; 
}

.test:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0px;
    background-image: repeating-linear-gradient(45deg, white 10px, green 20px), 
                      repeating-linear-gradient(135deg, white 10px, yellow 20px);
    background-size: 120% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
    -webkit-animation: move 1s infinite linear reverse; 
}

@-webkit-keyframes move {
    0% {    background-position: -40px 0%, -40px 100%;}
    100% {  background-position: 0px 0%, 0% 100%;}
}

webkit demo

Since I have used the Css3 syntax for the gradients, if you want to see in it in older browsers you will need to set the equivalence.

I have set the different elements in different colors so that it is easier to see what is what.

Updated demo to work on a 80px div

demo

I have change the background-size to

.test:before,
.test:after {
    background-size: 120px 50%;
}

So that there is enough background to covedr the size of the element and the movement

Upvotes: 2

Related Questions