CODEWITHSUNDEEP
javascripthtmlcss
Anupam kushwaha
Anupam kushwaha

Reputation: 1

Change image with css and animating it

Below is my code. I've implemented wave-like effect on image when page loads but unable to solve my other problem.

Problem - I want to change the image at every 3 sec and add wave-like animation when the image loads. I've three images and want to loop between them infinitely.

Link - https://codepen.io/354erytu/pen/OJVNYKQ

.wave {
  position: absolute;
  top: calc((100% - 30px)/2);
  left: calc((100% - 30px)/2);
  width: 30px;
  height: 30px;
  background: url('https://c4.wallpaperflare.com/wallpaper/755/29/195/chun-lo-tiger-japanese-art-samurai-demon-hd-wallpaper-thumb.jpg');
  background-attachment: fixed;
  background-position: center center;
}

.wave0 {
  z-index: 2;
  background-size: auto 106%;
  animation: w 1s forwards;
}

.wave1 {
  z-index: 3;
  background-size: auto 102%;
  animation: w 1s .2s forwards;
}

.wave2 {
  z-index: 4;
  background-size: auto 104%;
  animation: w 1s .4s forwards;
}

.wave3 {
  z-index: 5;
  background-size: auto 101%;
  animation: w 1s .5s forwards;
}

.wave4 {
  z-index: 6;
  background-size: auto 102%;
  animation: w 1s .8s forwards;
}

.wave5 {
  z-index: 7;
  background-size: auto 100%;
  animation: w 1s 1s forwards;
}

@keyframes w {
  0% {
    top: calc((100% - 30px)/2);
    left: calc((100% - 30px)/2);
    width: 30px;
    height: 30px;
  }
  100% {
    top: calc((100% - 300px)/2);
    left: calc((100% - 300px)/2);
    width: 300px;
    height: 300px;
  }
}
<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>

Upvotes: 0

Views: 246

Answers (2)

Kornelijus Glinskas
Kornelijus Glinskas

Reputation: 164

In this case, CSS won't be enough when you want to change image every 3s. It is possible using CSS sprites, however, you're using links of images so that option goes away. If I were you, I'd go with the JS solution because it is rather simple. You can read more how to implement it via JS in this thread - How do I change the background image every X seconds?

Upvotes: 0

Doomer
Doomer

Reputation: 75

Your keyframe syntax should be exactly like this, no 0% and 100%, and try to copy this one and modifying it because if you change ANYTHING in the way the accolades and and brackets are set up it will not work. You can add or remove as many properties as you want to animate:

@keyframes walk-east{from{background-position:0px 0px;}
to{background-position:1764px 0px;}
}

It should work like that, never saw it before with the 0% and 100% outside the accolades but it always did work without those. Except if you move a brackets one space left or right to make it look cleaner, then it won't work anymore. It's very stick on the positions of the brackets and accolades. I can't do it without copying one that's already done for some reasons...

Upvotes: 1

Related Questions