CODEWITHSUNDEEP
csscss-animations
La Forge1071
La Forge1071

Reputation: 81

CSS grid building animation

I would like to build a background animation when a website is opened. I want to create a grid on the whole website, but I also want it to build gradually. Does any body have an idea how I could build this grid gradually?

This is something I wrote for an animation of a single line:

div{
  height:0px;
  width:1px;
  border-bottom:1px solid #000;
  
  -webkit-animation: increase 3s;
  -moz-animation:    increase 3s; 
  -o-animation:      increase 3s; 
  animation:         increase 3s; 
  animation-fill-mode: forwards;
}

@keyframes increase {
    100% {
        width: 300px;
    }
}

The problem is I want to do this animation in the background, how can I achieve this?

Another option is to use a rectangle that repeats itself in the background. Is there a way to animate this?(rectangles appearing gradually) Background image: enter image description here

Upvotes: 0

Views: 202

Answers (1)

George Chond
George Chond

Reputation: 997

Without sample code, can't do much. Here is a CSS approach to do a Grid-like reveal. You could crop your image in squares and use as separate background for each of the boxes, or use one image and set the background-position of each box.

html,
body {
  margin: 0;
  padding: 0;
}

.grid {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.block {
  border: solid 1px #252525;
  opacity: 0;
  visibility: hidden;
  animation: reveal 1s forwards ease;
}

@keyframes reveal {
  100% {
    opacity: 1;
    visibility: visible;
  }
}

.block:nth-child(1) {
  animation-delay: 50ms;
}

.block:nth-child(2) {
  animation-delay: 100ms;
}

.block:nth-child(3) {
  animation-delay: 150ms;
}

.block:nth-child(4) {
  animation-delay: 200ms;
}

.block:nth-child(5) {
  animation-delay: 250ms;
}

.block:nth-child(6) {
  animation-delay: 300ms;
}

.block:nth-child(7) {
  animation-delay: 350ms;
}

.block:nth-child(8) {
  animation-delay: 400ms;
}

.block:nth-child(9) {
  animation-delay: 450ms;
}
<div class="grid">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Upvotes: 1

Related Questions