What is the best way to halt a CSS transition using JavaScript when dealing with an image?

Question

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the element disappear and reappear when the start button is pressed again with the same animation.

I'm not sure what is causing this problem. Additionally, after the transition ends, the element jumps to a corner unexpectedly.

function add()
  {
  document.getElementById("myAnimation").classList.add("run-animation");
  }    
function remove()
  {
document.getElementById("myAnimation").classList.remove("run-animation");
  }

body{
 background-color: "#4287f5";
}

#myAnimation
{
position:relative;
height: 40px;
width: 40p;
}
.run-animation 
{
-webkit-animation: move 6s;
    animation: move 6s;
}

@-webkit-keyframes move
{
 0%  {left: -200px;}
    25%  {left: 200px;}
    50%  {left: 100px;}
}
@keyframes move
{
0%  {left: -200px;}
    25%  {left: 200px;}
    50%  {left: 100px;}
}

 <button onclick="add()">Start</button> 
  <button onclick="remove()">End/Remove</button> 
 <div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>

javascript html css css-transitions css-animations

Answer 1

Answer №1

Instead of using an animation, consider implementing a "transition" for the effect you desire.

"Yeah but how do I make it go farther than the end point?" _{[someone might say.]}

To achieve this, utilize a custom bezier-curve timing function with values outside the [0, 1] range to create a bouncing effect.

By controlling just one value, you can easily manage the two states of your element.

#myAnimation {
  height: 40px;
  width: 40px;
  background: red;
  transform: translate(-40px, 0);
  transition: transform 1.5s cubic-bezier(0, 0, 0.5, 3);
}
:checked ~ #myAnimation {
  transform: translate(100px, 0);
}
body{ margin:0; }

<input type="checkbox" id="check"><label for="check">show elem</label>
<div id="myAnimation"></div>

Note: In the above example, I used transform instead of left for better performance reasons. You can also use a button with JavaScript to toggle a class for the same effect.

Answer 2

Instead of using an animation, consider implementing a "transition" for the effect you desire.

"Yeah but how do I make it go farther than the end point?" _{[someone might say.]}

To achieve this, utilize a custom bezier-curve timing function with values outside the [0, 1] range to create a bouncing effect.

By controlling just one value, you can easily manage the two states of your element.

#myAnimation {
  height: 40px;
  width: 40px;
  background: red;
  transform: translate(-40px, 0);
  transition: transform 1.5s cubic-bezier(0, 0, 0.5, 3);
}
:checked ~ #myAnimation {
  transform: translate(100px, 0);
}
body{ margin:0; }

<input type="checkbox" id="check"><label for="check">show elem</label>
<div id="myAnimation"></div>

Note: In the above example, I used transform instead of left for better performance reasons. You can also use a button with JavaScript to toggle a class for the same effect.

Answer 3

Answer №2

It seems like the reason your element is not appearing correctly is because you haven't specified its default appearance when it's not being animated. Try setting display:none; as the default style and then change it to display:block; during the animation. Here's an example:

function add() {
  document.getElementById("myAnimation").classList.add("run-animation");
}

function remove() {
  document.getElementById("myAnimation").classList.remove("run-animation");
}

body {
  background-color: "#4287f5";
}

#myAnimation {
  position: relative;
  /*
  Hide the element if it is not animated
  */
  display: none;
  height: 40px;
  width: 40p;
}

#myAnimation.run-animation {
  -webkit-animation: move 6s;
  animation: move 6s;
  /*
  Show the element if it is animated
  */
  display: block;
}

@-webkit-keyframes move {
  0% {
    left: -200px;
  }
  25% {
    left: 200px;
  }
  50% {
    left: 100px;
  }
}
  
@keyframes move {
  0% {
    left: -200px;
  }
  25% {
    left: 200px;
  }
  50% {
    left: 100px;
  }
}

<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>

Answer 4

It seems like the reason your element is not appearing correctly is because you haven't specified its default appearance when it's not being animated. Try setting display:none; as the default style and then change it to display:block; during the animation. Here's an example:

function add() {
  document.getElementById("myAnimation").classList.add("run-animation");
}

function remove() {
  document.getElementById("myAnimation").classList.remove("run-animation");
}

body {
  background-color: "#4287f5";
}

#myAnimation {
  position: relative;
  /*
  Hide the element if it is not animated
  */
  display: none;
  height: 40px;
  width: 40p;
}

#myAnimation.run-animation {
  -webkit-animation: move 6s;
  animation: move 6s;
  /*
  Show the element if it is animated
  */
  display: block;
}

@-webkit-keyframes move {
  0% {
    left: -200px;
  }
  25% {
    left: 200px;
  }
  50% {
    left: 100px;
  }
}
  
@keyframes move {
  0% {
    left: -200px;
  }
  25% {
    left: 200px;
  }
  50% {
    left: 100px;
  }
}

<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>

Answer 5

Answer №3

Perhaps this solution could be beneficial

function add()
  {
  document.getElementById("myAnimation").classList.add("run-animation");
  }    
function remove()
  {
document.getElementById("myAnimation").classList.remove("run-animation");
  }

body{
 background-color: "#4287f5";
}

#myAnimation
{
position:relative;
height: 40px;
width: 40p; 
    left: 0;
    opacity: 1;  
}
.run-animation 
{
-webkit-animation: move 6s;
    animation: move 6s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes move
{
0%  {left: 0;}
    25%  {left: 200px;opacity: 1;}
    50%  {left: 100px;opacity: 0;}
    80%  {left: 0; opacity: 0;}
    100% {left: 0; opacity: 1;}
}
@keyframes move
{
0%  {left: 0;}
    25%  {left: 200px;opacity: 1;}
    50%  {left: 100px;opacity: 0;}
    80%  {left: 0; opacity: 0;
    100% {left: 0; opacity: 1;
    
}

<button onclick="add()">Start</button> 
  <button onclick="remove()">End/Remove</button> 
 <div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>

Answer 6

Perhaps this solution could be beneficial

function add()
  {
  document.getElementById("myAnimation").classList.add("run-animation");
  }    
function remove()
  {
document.getElementById("myAnimation").classList.remove("run-animation");
  }

body{
 background-color: "#4287f5";
}

#myAnimation
{
position:relative;
height: 40px;
width: 40p; 
    left: 0;
    opacity: 1;  
}
.run-animation 
{
-webkit-animation: move 6s;
    animation: move 6s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes move
{
0%  {left: 0;}
    25%  {left: 200px;opacity: 1;}
    50%  {left: 100px;opacity: 0;}
    80%  {left: 0; opacity: 0;}
    100% {left: 0; opacity: 1;}
}
@keyframes move
{
0%  {left: 0;}
    25%  {left: 200px;opacity: 1;}
    50%  {left: 100px;opacity: 0;}
    80%  {left: 0; opacity: 0;
    100% {left: 0; opacity: 1;
    
}

<button onclick="add()">Start</button> 
  <button onclick="remove()">End/Remove</button> 
 <div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

Answer №1

Answer №2

Answer №3

Similar questions

Displaying divs depending on dropdown selection - Troubleshooting script issue

Unable to load models in face-api.js even though attempting to infer the models

Incorporating a stationary navigation bar alongside a parallax scrolling layout

Steps for displaying a loading gif animation prior to retrieving text content using JavaScript

Setting up GameClosure on a Windows machine

Ways to implement a percentage for scrollTop

What is the reason behind Intellij Code Inspection indicating that a selector is not being used?

Testing React Component State Updates

The Spring Boot REST application is unexpectedly returning HTML instead of JSON, causing confusion for the Angular application which is unable to recognize the

Prevent running function bodies simultaneously based on user events in JavaScript until a previously triggered execution is completed

EaselJS BitmapAnimation has delay when using gotoAndPlay

Rendering HTML with Apache Tiles using an empty <a></a> tag

Failing to reach the nested if statements within a switch case block

Selenium is throwing an ElementNotInteractableError indicating that the element is not able to be

Laravel: Issue with displaying stored images from the database

Navigating through nested promises can be a daunting task within the world of JavaScript and Angular

Display the field names from a MySQL table on a web page

I am having trouble getting the bootstrap link and css files to work on a specific URL. Can you please help me troubleshoot this issue and let me know if there are any additional files needed to

What is the best method to retrieve a global variable from two separate PHP files?

Apply a specific class to a list once scrolling beyond a certain offset of a group of division elements