How do I make this keyframe animation responsive when I scale down my window size?

Question

How do I make this keyframe animation responsive when I scale down my window size?

99 Views Asked by Taariq Elliott At 22 November 2022 at 23:37

I'm having an issue with getting my keyframe animation to stay centered when I scale down the browser window on Chrome. How can I achieve this?

I've linked my codepen page below so you can see what happens when the page gets smaller:

https://codepen.io/taariqkwame/full/XWmvYzR

Here's my HTML and my CSS:

body{
  background-color: black;
  text-align: center;  
}

h1{
  position: relative;
}

.main{
  color: pink;
}

#welcome{
  color: gold;
}

.selection{
  background-color: #1000df;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 10px;
  cursor: pointer;
  border-radius: 5px;
}

#choose{
  color: white;
  max-width: 150px;
  position: relative;
  border-radius: 5px;
  animation-name: choose;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes choose {
  0%   {background-color:blue; left:585px; top:0px;}
  25%  {background-color:pink; left:845px; top:0px;}
  50%  {background-color:green; left:585px; top:0px;}
  75%  {background-color:orange; left:845px; bottom:0px;}
  100% {background-color:blue; left:585px; top:0px;}
}

<body>
  <div class = "main">
<h1 id = "welcome">Welcome To the Ancient Game of Lapis....Papyrus....Scalpellus!</h1>

<h4 id = "choose">choose wisely...</h4>

<div id="choice">
  <button class="selection" id="lapis">Lapis</button>
  <button class="selection" id="papyrus">Papyrus</button>
  <button class="selection" id="scalpellus">Scalpellus</button>
  </div>

<div id="results-container">
<h2 id="results"></h2>
</div>
  </div>
</body>

Original Q&A

There are 1 best solutions below

**A Haworth** · Answer 1 · 2022-11-23T09:28:54.257000

You need the animated element to be able to 'pick up' the width of the 3 selections.

This snippet puts the animated element and the choice element into one container which is centered (using margin 0 auto).

The keyframes are changed to move the element from left to left 100% but with a translation related to width so that it remains within the containing element.

body {
  background-color: black;
  text-align: center;
}

h1 {
  position: relative;
}

.main {
  color: pink;
}

#welcome {
  color: gold;
}

#choice-container {
  width: fit-content;
  margin: 0 auto;
}

.selection {
  background-color: #1000df;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 10px;
  cursor: pointer;
  border-radius: 5px;
}

#choose {
  color: white;
  max-width: 150px;
  position: relative;
  border-radius: 5px;
  animation-name: choose;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes choose {
  0% {
    background-color: blue;
    left: 0;
    transform: translateX(0);
    top: 0px;
  }
  25% {
    background-color: pink;
    left: 100%;
    transform: translateX(-100%);
    top: 0px;
  }
  50% {
    background-color: green;
    left: 0;
    transform: translateX(0);
    top: 0px;
  }
  75% {
    background-color: orange;
    left: 100%;
    transform: translateX(-100%);
    bottom: 0px;
  }
  100% {
    background-color: blue;
    left: 0;
    transform: translateX(0);
    top: 0px;
  }
}

<body>
  <div class="main">
    <h1 id="welcome">Welcome To the Ancient Game of Lapis....Papyrus....Scalpellus!</h1>

    <div id="choice-container">
      <h4 id="choose">choose wisely...</h4>
      <div id="choice">
        <button class="selection" id="lapis">Lapis</button>
        <button class="selection" id="papyrus">Papyrus</button>
        <button class="selection" id="scalpellus">Scalpellus</button>
      </div>
    </div>
    <div id="results-container">
      <h2 id="results"></h2>
    </div>
  </div>


</body>

Note: the use of bottom in your keyframes is having no effect as top overrides it. It's outside the scope of the question to know what you wanted here. Perhaps ask another one if it's important for the element to move downwards as well as across.

How do I make this keyframe animation responsive when I scale down my window size?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in ANIMATION

Related Questions in RESPONSIVE

Related Questions in KEYFRAME

Trending Questions

Popular # Hahtags

Popular Questions