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

Implementing an API call using Redux Saga within a React application

Determining the Height of a Navigation Bar Automatically with CSS

Attempting to showcase JSON response within an HTML page using JavaScript

Different ways to swap table cells using only CSS

The cloud function in Firebase was unable to connect to the dialogflow route

Customizing the color of buttons in MUI 4

Show an item in a visual format of a list

Is there a guarantee that XHR requests made within a click handler of an anchor tag will always be sent?

Invoke the designated JavaScript function within a subordinate <frame>

Customizing the appearance of a date input field by passing an object with Vue.js

React JS tutorial: deleting an entry from the browser's localStorage

A tutorial on creating dynamic text animations: sliding text effects on web pages

Exploring Angular 8 HTTP Observables within the ngOnInit Lifecycle Hook

Stuffing a container with an image without considering the proportions

How can I use jQuery to retrieve the total number of elements in a dropdown list?

Challenges Encountered when Making Multiple API Requests

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

What could be causing the error I'm encountering while running the 'net' module in Node.js?

Clicking on tabs causes their content to mysteriously vanish

Experiment with jQuery and JavaScript compatibility specifically on Internet Explorer 6