How do i get my animation image to not disappear?-CodePudding

So, im currently doing just a side project for myself to get to learn more with html,css,javascript. Im working with animations for the first time and for some reason i cant figure out why my character who is supposed to run across the bottom of the border, why she disappears half way?

//tracker.js
let count = 0;
let count2 = 0;
let countEl = document.getElementById("count-el") //pass in argument
let winsEl = document.getElementById("wins-el") //pass in argument
let losesEl = document.getElementById("loses-el") //pass in argument
//DOM- document object model aka how you use javascript to modify a website
let saveEl = document.getElementById("save-el")

function incrementW() {
  count  = 1
  winsEl.innerText = count;
}

function incrementL() {
  count2  = 1
  losesEl.innerText = count2;
}

function save() {
  let saveCt = "W: "   count   " L: "   count2   " - "
  saveEl.textContent  = saveCt;
  //wins
  count = 0;
  winsEl.textContent = count;
  //losses
  count2 = 0;
  losesEl.textContent = count2;
  ///when i used innerText the spaces between the dashes wouldnt work so had to use textContent bc it can pick up
  //hidden elements unlike innerText

}

/* tracker.css */

body {
  background-repeat: no-repeat;
  background-image: url("overwatch.jpg");
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
  height: 100vh;
}

@keyframes example {
  0% {
    background-image: url("tracer1.gif");
    left: 0px;
  }
  100% {
    left: 855px;
    top: 0px;
  }
}

.container {
  background: rgba(203, 195, 227, 0.3);
  width: 80%;
  max-width: 1000px;
  margin: auto;
  border: 3px solid white;
  border-radius: 10px;
}

.container1 {
  width: 140px;
  height: 140px;
  animation-name: example;
  animation-duration: 5s;
  position: relative;
  animation-iteration-count: infinite;
  border: 3px solid white;
  animation-fill-mode: backwards;
}

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Segoe UI Light", serif;
  font-size: 3em;
}

p {
  font-family: "Segoe UI Light", serif;
}

h2 {
  font-size: 50px;
  display: inline;
  margin: 90px;
}

button {
  border: none;
  border: 1px solid white;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-weight: bold;
  width: 200px;
  margin-top: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#win-btn {
  background: cadetblue;
}

#lose-btn {
  background: indianred;
}

#save-btn {
  margin-top: 1em;
  background: grey;
}

#win-btn:hover {
  filter: brightness(110%);
}

#lose-btn:hover {
  filter: brightness(110%);
}

#save-btn:hover {
  filter: brightness(110%);
}

<div >
  <h1>Overwatch Game Counter</h1>
  <button id="win-btn" onclick="incrementW()">Win</button>
  <button id="lose-btn" onclick="incrementL()">Lose</button>
  </br>
  <h2 id="wins-el">0</h2>
  <h2 id="loses-el">0</h2>
  </br>
  <button id="save-btn" onclick="save()">Save</button>
  <p id="save-el">Previous Entries: </p>
  <script src="tracker.js"></script>
  <div >
  </div>
</div>

I tried searching things up and messing with the css but she still disappears. I put a border around the gif to see if the animation is still running and it looks like it still is, its just the image itself disappearing.

CodePudding user response：

//tracker.js
let count = 0;
let count2 = 0;
let countEl = document.getElementById("count-el") //pass in argument
let winsEl = document.getElementById("wins-el") //pass in argument
let losesEl = document.getElementById("loses-el") //pass in argument
//DOM- document object model aka how you use javascript to modify a website
let saveEl = document.getElementById("save-el")

function incrementW() {
  count  = 1
  winsEl.innerText = count;
}

function incrementL() {
  count2  = 1
  losesEl.innerText = count2;
}

function save() {
  let saveCt = "W: "   count   " L: "   count2   " - "
  saveEl.textContent  = saveCt;
  //wins
  count = 0;
  winsEl.textContent = count;
  //losses
  count2 = 0;
  losesEl.textContent = count2;
  ///when i used innerText the spaces between the dashes wouldnt work so had to use textContent bc it can pick up
  //hidden elements unlike innerText

}

/* tracker.css */

body {
  background-repeat: no-repeat;
  background-image: url("overwatch.jpg");
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
  height: 100vh;
}

@keyframes example {
  0% {
    left: 0px;
  }
  100% {
    left: 855px;
    top: 0px;
  }
}

.container {
  background: rgba(203, 195, 227, 0.3);
  width: 80%;
  max-width: 1000px;
  margin: auto;
  border: 3px solid white;
  border-radius: 10px;
}

.container1 {
  background-size: cover;
  background-repeat: no-repeat;
  width: 140px;
  height: 140px;
  animation-name: example;
  animation-duration: 5s;
  position: relative;
  animation-iteration-count: infinite;
  border: 3px solid white;
  animation-fill-mode: backwards;
  background-image: url("https://www.pngall.com/wp-content/uploads/5/Overwatch-Character-PNG-Image-File.png");
}

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Segoe UI Light", serif;
  font-size: 3em;
}

p {
  font-family: "Segoe UI Light", serif;
}

h2 {
  font-size: 50px;
  display: inline;
  margin: 90px;
}

button {
  border: none;
  border: 1px solid white;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-weight: bold;
  width: 200px;
  margin-top: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#win-btn {
  background: cadetblue;
}

#lose-btn {
  background: indianred;
}

#save-btn {
  margin-top: 1em;
  background: grey;
}

#win-btn:hover {
  filter: brightness(110%);
}

#lose-btn:hover {
  filter: brightness(110%);
}

#save-btn:hover {
  filter: brightness(110%);
}

<div >
  <h1>Overwatch Game Counter</h1>
  <button id="win-btn" onclick="incrementW()">Win</button>
  <button id="lose-btn" onclick="incrementL()">Lose</button>
  </br>
  <h2 id="wins-el">0</h2>
  <h2 id="loses-el">0</h2>
  </br>
  <button id="save-btn" onclick="save()">Save</button>
  <p id="save-el">Previous Entries: </p>
  <script src="tracker.js"></script>
  <div >
  </div>
</div>

Instead of setting the image of tracer in the styling of the element, you put the image of tracer in the animation. Which implies background property should be animated from "background of tracer" to "no background". You simply need to set the background property in a place where it won't change.

I also changed the url to some random png of an overwatch character, so that the snippet would show something.