Reverse the CSS animation direction

Question

Reverse the CSS animation direction

I am facing an issue with an animation that moves in one direction. I am looking to reverse the animation so it goes back to its original position:

$('#right').click(function() {
  $('.container').removeClass('.move-left').addClass('move-right');
});
$('#left').click(function() {
  $('.container').removeClass('.move-right').addClass('move-left');
});

.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}
.move-right {
  animation: move-right 10s linear;
}
.move-left {
  animation: move-left 10s linear;
}
@keyframes move-right {
  to {
    transform: translateX(500px);
  }
}
@keyframes move-left {
  to {
    transform: translateX(0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

http://codepen.io/Deka87/pen/GWVbjv

This current solution does not work as expected, likely due to the need to save the current translate position resulting in unexpected behavior when resizing the page. Is there a more reliable alternative? (Perhaps using `animation-direction`).

javascript jquery html css

Answer 1

Answer №1

One approach is to use the initial value as a starter for the left animation, and also apply forwards to maintain the final state of the animation:

$('#right').click(function() {
  $('.container').removeClass('move-left').addClass('move-right');
});
$('#left').click(function() {
  $('.container').removeClass('move-right').addClass('move-left');
});

.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}
.move-right {
  animation: move-right 2s linear forwards;
}
.move-left {
  animation: move-left 2s linear forwards;
}
@keyframes move-right {
  to {
    transform: translateX(100px);
  }
}
@keyframes move-left {
  from {
    transform: translateX(100px);
  },
  to {
    transform: translateX(0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

Bonus

If your aim is simply to move the element that way, you might prefer using transition. Check out the following snippet below, which will enable you to utilize the buttons when the transition is occurring in your initial code. If you press the buttons, they will smoothly transition rather than abruptly changing positions.

$('button').click(function() {
  if($(this).attr('id')=="right") {
    $('.container').addClass('move')
  } else {
    $('.container').removeClass('move')
  }
});

.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
  transition:transform 2s linear;
}
.move {
  transform: translateX(100px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

Jquery animate()

$('button').click(function() {
  if($(this).attr('id')=="right") {
    $('.container').stop().animate({'left':'200px'},2000)
  } else if($(this).attr('id')=="left") {
    $('.container').stop().animate({'left':'0'},2000)
  } else {
    $('.container').stop()
  }
});

.container {
  position:relative;
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="pause">Pause</button>
<button id="right">Right right first</button>
<div class="container"></div>

Answer 2

One approach is to use the initial value as a starter for the left animation, and also apply forwards to maintain the final state of the animation:

$('#right').click(function() {
  $('.container').removeClass('move-left').addClass('move-right');
});
$('#left').click(function() {
  $('.container').removeClass('move-right').addClass('move-left');
});

.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}
.move-right {
  animation: move-right 2s linear forwards;
}
.move-left {
  animation: move-left 2s linear forwards;
}
@keyframes move-right {
  to {
    transform: translateX(100px);
  }
}
@keyframes move-left {
  from {
    transform: translateX(100px);
  },
  to {
    transform: translateX(0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

Bonus

If your aim is simply to move the element that way, you might prefer using transition. Check out the following snippet below, which will enable you to utilize the buttons when the transition is occurring in your initial code. If you press the buttons, they will smoothly transition rather than abruptly changing positions.

$('button').click(function() {
  if($(this).attr('id')=="right") {
    $('.container').addClass('move')
  } else {
    $('.container').removeClass('move')
  }
});

.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
  transition:transform 2s linear;
}
.move {
  transform: translateX(100px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

Jquery animate()

$('button').click(function() {
  if($(this).attr('id')=="right") {
    $('.container').stop().animate({'left':'200px'},2000)
  } else if($(this).attr('id')=="left") {
    $('.container').stop().animate({'left':'0'},2000)
  } else {
    $('.container').stop()
  }
});

.container {
  position:relative;
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="pause">Pause</button>
<button id="right">Right right first</button>
<div class="container"></div>

Reverse the CSS animation direction

Answer №1

Bonus

Jquery animate()

Similar questions

Find the closest multiple of 3 for the given number

Concluding the use of angular-bootstrap-datetimepicker when selecting a date

How can I send parameters to an HTML file using Node.js?

Having a bottom border only on input fields appears strange when viewed on a mobile device

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

Discover the steps to trigger a Bootstrap popup modal when clicking on an anchor link using Angular

The HTML checkbox is initialized as checked when the page loads

Assigning multiple properties to objects in Javascript

Vuetify vueJS dialog with elevated design

Incorporating JavaScript timeout alerts into a dynamic webpage with a running AJAX task

Integrating Jquery with React Portals for dynamic functionality

Having trouble removing or adding a class to an HTML element?

Importing a newly harvested array from a .js file (array that has been exported)

Unable to launch React Native project on emulator now

Implementing ES6 Angular directives with two-way isolated binding

Tips on establishing validators for deeply nested form controls within form groups in Angular 6 reactive forms

Acquire dynamically loaded HTML content using Ajax within a WebView on an Android

Tips for effectively creating a fresh array of objects by extracting distinct values from arrays of child elements within a collection of parent objects

Filtering through values stored in the .data() object

When utilizing the Mongodb findOne function, it may not return any results or could