Initiating CSS animation from the start

Question

Initiating CSS animation from the start

Having an issue with the "Start button" that plays both animation and background sounds. When I pause it, the animation does not stop where it left off and starts from the beginning again.

I tried using animation-play-state: pause and animation-fill-mode: forwards but I must be doing something wrong because it's not working as expected.

function startAnimation(){
   var audio = document.getElementById("audio");
   audio.play();
   document.getElementById('target').className ='animated';
}

function pauseAnimation(){
   var audio = document.getElementById("audio");
   audio.pause();
   document.getElementById('target').className ='noo';
}

button {
    background-color: darkgreen; 
    border-radius: 50px;
    border: none;
    color: white;
    padding: 13px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.4), 0 2px 1px rgba(0,0,0,0.1);
    }

button:hover{
    background-color: green; 
    border-radius: 50px;
    border: none;
    color: white;
    padding: 13px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer; 
    box-shadow: 0 6px 6px 0 rgba(0,0,0,0.25),
        0 0 4px 2px rgba(0,0,0,0.05);
    transform: translateY(-2px);
  }
p {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 80;
  color: black;
  overflow: hidden;

background: linear-gradient(to right, darkgreen, darkgreen 50%, black 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;

}
.animated {
    transition: background-position 9000ms linear;
    background-position: 0 100%;
    animation-fill-mode: forwards;
}
.noo > {
    -webkit-animation-play-state: paused;
    animation-fill-mode: forwards;
}

<button type = "button" id= "ST" onclick= "startAnimation()" >Start the story!</button><br><br><br><br>

<p href="#a" id="target">Got this simple problem, but I lack experience in CSS to solve it. Attaching the code below for reference </p> 

<audio id="audio" src="https://k15xf2.webwave.dev/lib/k15xf2/Prob1-kgs9f12v.mp3"></audio>

<button type = "button" id= "ST1" onclick= "pauseAnimation()" >Pause the story!</button><br><br><br><br>

html css

Answer 1

Answer №1

It seems like there might be some confusion between transitions and animations. The animation-play-state property is specifically for controlling animations, not transitions.

When you add the class animated to set the background-position, a transition will occur. If you pause by removing the animated class and adding only the noo class, which doesn't have a background-position attribute, the element will revert back to its original position as per the default style (p).

To resolve this issue, I recommend using a proper animation approach by defining a @keyframes rule that transitions from the initial background-position to the desired one (e.g., 0 100%).

Furthermore, instead of completely removing the animated class from the element, consider keeping it along with the addition of the noo class to halt the animation effect.

Below is an example code snippet showcasing these recommendations:

function startAnimation() {
  var audio = document.getElementById("audio");
  audio.play();
  document.getElementById('target').className = 'animated';
}

function pauseAnimation() {
  var audio = document.getElementById("audio");
  audio.pause();
  document.getElementById('target').className = 'animated noo';
}

button {
  /* Button styling properties */
}

button:hover {
  /* Hover state styling properties */
}

p {
  /* Paragraph styling properties */
}

.animated {
  animation-duration: 9s;
  animation-name: fill;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

.noo {
  animation-play-state: paused !important;
}

@keyframes fill{
  from {
    background-position: 100%;
  }

  to {
    background-position: 0 100%;
  }
}

<button type="button" id="startButton" onclick="startAnimation()">Start Animation!</button><br><br><br><br>

<p id="target">Content with animated effects goes here.</p>

<audio id="audio" src="path/to/audio/file.mp3"></audio>

<button type="button" id="pauseButton" onclick="pauseAnimation()">Pause Animation!</button><br><br><br><br>

Answer 2

It seems like there might be some confusion between transitions and animations. The animation-play-state property is specifically for controlling animations, not transitions.

When you add the class animated to set the background-position, a transition will occur. If you pause by removing the animated class and adding only the noo class, which doesn't have a background-position attribute, the element will revert back to its original position as per the default style (p).

To resolve this issue, I recommend using a proper animation approach by defining a @keyframes rule that transitions from the initial background-position to the desired one (e.g., 0 100%).

Furthermore, instead of completely removing the animated class from the element, consider keeping it along with the addition of the noo class to halt the animation effect.

Below is an example code snippet showcasing these recommendations:

function startAnimation() {
  var audio = document.getElementById("audio");
  audio.play();
  document.getElementById('target').className = 'animated';
}

function pauseAnimation() {
  var audio = document.getElementById("audio");
  audio.pause();
  document.getElementById('target').className = 'animated noo';
}

button {
  /* Button styling properties */
}

button:hover {
  /* Hover state styling properties */
}

p {
  /* Paragraph styling properties */
}

.animated {
  animation-duration: 9s;
  animation-name: fill;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

.noo {
  animation-play-state: paused !important;
}

@keyframes fill{
  from {
    background-position: 100%;
  }

  to {
    background-position: 0 100%;
  }
}

<button type="button" id="startButton" onclick="startAnimation()">Start Animation!</button><br><br><br><br>

<p id="target">Content with animated effects goes here.</p>

<audio id="audio" src="path/to/audio/file.mp3"></audio>

<button type="button" id="pauseButton" onclick="pauseAnimation()">Pause Animation!</button><br><br><br><br>

Initiating CSS animation from the start

Answer №1

Similar questions

Issue with maintaining fixed space above navbar in HTML/CSS code

Design a navigation bar that seamlessly incorporates an image

What is the process for adding information to datatables using jQuery?

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

django-avatar // insufficient amount of values for decomposition (anticipated 2, received 1)

How to align an element to the bottom using CSS without relying on the parent's height

Customize the background color of FullCalendar in a React application

Styling Material UI components with CSS is a great way to

Use ajax to load a webpage into a specific div, then reload the same div after submitting

The getText method in Selenium seems to be malfunctioning as it is unable to retrieve any text content from

Incorporating the parent object into a nested JavaScript function

"Using jQuery to trigger a click event on a specific column within

`Set the body height to equal that of the entire document`

the contents exceed the boundaries

Utilizing HTML and CSS allows for creating a responsive layout with three elements such as this

Exploring the power of Vue.js by utilizing nested components within single file components

Issues with the background-image scroll feature not functioning as intended

Maximizing space efficiency in Bootstrap 5

Tips for adjusting the color of the sidebar in an HTML email template

Utilizing Selenium for automating button clicks