Turn Off CSS3 Animation With jQuery?
You can just override that CSS properties with "none" to every animation
function stopAnimation(element)
{
$(element).css("-webkit-animation", "none");
$(element).css("-moz-animation", "none");
$(element).css("-ms-animation", "none");
$(element).css("animation", "none");
}
so you can stop animation simply calling this function...
What is the cleanest way to disable CSS transition effects temporarily?
Short Answer
Use this CSS:
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
Plus either this JS (without jQuery)...
someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions
Or this JS with jQuery...
$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions
... or equivalent code using whatever other library or framework you're working with.
Explanation
This is actually a fairly subtle problem.
First up, you probably want to create a 'notransition' class that you can apply to elements to set their *-transition
CSS attributes to none
. For instance:
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
(Minor aside - note the lack of an -ms-transition
in there. You don't need it. The first version of Internet Explorer to support transitions at all was IE 10, which supported them unprefixed.)
But that's just style, and is the easy bit. When you come to try and use this class, you'll run into a trap. The trap is that code like this won't work the way you might naively expect:
// Don't do things this way! It doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
someElement.classList.remove('notransition')
Naively, you might think that the change in height won't be animated, because it happens while the 'notransition' class is applied. In reality, though, it will be animated, at least in all modern browsers I've tried. The problem is that the browser is caching the styling changes that it needs to make until the JavaScript has finished executing, and then making all the changes in a single reflow. As a result, it does a reflow where there is no net change to whether or not transitions are enabled, but there is a net change to the height. Consequently, it animates the height change.
You might think a reasonable and clean way to get around this would be to wrap the removal of the 'notransition' class in a 1ms timeout, like this:
// Don't do things this way! It STILL doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
setTimeout(function () {someElement.classList.remove('notransition')}, 1);
but this doesn't reliably work either. I wasn't able to make the above code break in WebKit browsers, but on Firefox (on both slow and fast machines) you'll sometimes (seemingly at random) get the same behaviour as using the naive approach. I guess the reason for this is that it's possible for the JavaScript execution to be slow enough that the timeout function is waiting to execute by the time the browser is idle and would otherwise be thinking about doing an opportunistic reflow, and if that scenario happens, Firefox executes the queued function before the reflow.
The only solution I've found to the problem is to force a reflow of the element, flushing the CSS changes made to it, before removing the 'notransition' class. There are various ways to do this - see here for some. The closest thing there is to a 'standard' way of doing this is to read the offsetHeight
property of the element.
One solution that actually works, then, is
someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions
Here's a JS fiddle that illustrates the three possible approaches I've described here (both the one successful approach and the two unsuccessful ones):
http://jsfiddle.net/2uVAA/131/
jQuery stop animation method
As others pointed out, it's CSS animation.
To stop it and reset disc to its original position use (this also resets animation):
$('.player-disc').css('animation', 'none');
To pause it and not reset disc to its original position use:
$('.player-disc').css('animation-play-state', 'paused');
You can then resume animation using:
$('.player-disc').css('animation-play-state', 'running');
$('#btn1').bind('click', function(){ $('.player-disc').css('animation', 'none');});$('#btn2').bind('click', function(){ $('.player-disc').css('animation-play-state', 'paused');});$('#btn3').bind('click', function(){ $('.player-disc').css('animation-play-state', 'running');});
#player { position: relative; margin: 30px auto; height: 300px; width: 700px; background-color: #E25822; -moz-border-radius: 200px; -webkit-border-radius: 200px; border-radius: 200px;}#player .player-disc { -moz-animation: spin 5s infinite linear; -webkit-animation: spin 5s infinite linear; animation: spin 5s infinite linear; height: 250px; width: 250px; background-color: black; background-size: 250px; position: absolute; top: 50%; left: 25px; transform: translateY(-50%);}
#player .player-disc span { position: absolute; width:30px; height: 30px; background-color:white; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;}
@keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="btn1" type="button">Set animation to none</button><button id="btn2" type="button">Pause animation</button><button id="btn3" type="button">Play animation</button><div id="player"> <div class="player-disc"> <span></span> </div></div>
Disable JQuery automatic animation
Perhaps the element you are changing the height of has a css
transition property that is responsibe for the animation.
$(function() { $('.myClass').css('width', '100px');});
.myClass { height: 50px; width: 300px; background-color: red;}.transition { transition: width 3s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>with transition<div class="myClass transition"></div>
without transition<div class="myClass"></div>
Unset css animation property with jQuery.css method
You have to set like this:
function stopAnimation()
{
$('#site-title, #site-description').css("-webkit-animation", "none");
$('#site-title, #site-description').css("-moz-animation", "none");
$('#site-title, #site-description').css("-ms-animation", "none");
$('#site-title, #site-description').css("animation", "none");
}
Reference
disable animation css file for mobile device
Something like:
@media (max-width: 320px) { .animated { animation: none !important; }}
How to enable and disable css transition in one js-event?
There is 2 ways you can do it -
1# - Combining your function with CSS animation
$(document).ready(function() { $('#goLeft').on('click', function() { $('#box').removeClass('soft left-right'); $('#box').css('left', '300px'); }); $('#goRight').on('click', function() { $('#box').addClass('soft').removeClass('left-right'); $('#box').css('left', '400px'); }); $('#goLeftAndRight').on('click', function() { $('#box').addClass('left-right').removeClass('soft'); });});
h2 { cursor: pointer;}
#box { position: fixed; top: 100px; left: 400px; height: 100px; width: 100px; background-color: #358;}
#box p { padding: 5px; color: #fff; text-align: center;}
.soft { transition: all 0.3s ease-out;}@keyframes leftRight{ 0%{left:300px} 100%{left:400px}}
.left-right{ left:400px animation: leftRight 0.3s forwards ease-in-out; -webkit-animation: leftRight 0.3s forwards ease-in-out;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>
<body> <h2 id="goLeft">jump left</h2> <h2 id="goRight">slide right</h2> <h2 id="goLeftAndRight">jump left and slide right</h2> <div id="box"> <p>use headers to move</div></body>
</html>
Stop current CSS transition animation
You can use animation-play-state
animation-play-state: paused;
Here's the fiddle: http://jsfiddle.net/Cvw5Z/
Prevent CSS3 animation from firing after page load
You could simplify what you have a bit.
Working Example
$('#btnLogin').click(function() { $('.panel').toggleClass('active');});
.panel { background-color: red; height: 200px; opacity: 0; width: 200px; transition: 2s;}.panel.active { opacity: 1; transition: 2s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="body"> <div class="panel"></div></div><button id="btnLogin">Login</button>
Related Topics
How to Set Width of <Div> to Fit Constant Number of Letters in Monospace Font
How to Get Element's Attribute Set in CSS Class
Browser Support for Angular Material
How to Over-Ride CSS with User-CSS on Mobile Safari
Get Actual Pixel Coordinates of Div After CSS3 Transform
Prevent Requestanimationframe from Running All the Time
Calendar Not Showing Up in Bootstrap Datetimepicker
Transitioning Affixed Navigation Bar - CSS
Creating a Custom Attribute with Angularjs
How to Override Inline CSS Through JavaScript
Make Named Anchor Bookmarks Appear Always at Top of the Screen When Clicked
Attempt to Add a Rule to a CSS Stylesheet Gives "The Operation Is Insecure" in Firefox
How to Get New Image Size Dimension After Giving Object-Fit:Contain Property to the Image Tag
Cannot Return CSS Property of HTML Element
Disable iPhone "Save Image" Popup
Handling JavaScript Events in Wkwebview
Websites That Archive Cross-Browser, Cross-Platform CSS/Js Bugs