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

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

Exploring design techniques in React Native

Using a Mixin as an Argument in Another Mixin in LESS CSS

HTML5 will consistently display the video control panel

I am looking to incorporate a feature in my form that allows for multiple file uploads and displaying them

Is there a way to incorporate cell highlighting on IE?

Is it possible to establish a CSS minimum width that is relative to a different element?

Reading Properties in VueJS with Firebase

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Equal-height list items in a multi-column unordered list

Is the sequence of CSS styles important in styling web content?

What is the reason the .clearfix class fails to properly clear a floated element?

What steps can be taken to stop 'type-hacking'?

Having trouble applying CSS while printing using the ngx-print library in Angular 14. Can anyone help me out with this issue

Initial page load experiencing issues with paroller.js functionality

What is the best way to connect information from an HTML input field to a JavaScript object with the help of AngularJS?

section element is not receiving styles from the specified class

The find function within $(this) is malfunctioning

Retrieve the Data from Input Fields with Matching Classes and Transmit to a Script Using AJAX Request

Bootstrap dropdown menu fails to adapt to updated navbar height