CSS3 Transitions vs jQuery Animations
In this page:
CSS Transitions
CSS transitions let the browser animate a property change declaratively and are usually the lightest option for simple hover or state-based effects, since the browser's own rendering engine handles the animation.
Example: CSS Transitions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>#box { width:100px; transition: width 0.5s; }</style>
<div id="box">Box</div>
<button id="btn">Grow</button>
<script>
$("#btn").on("click", function() {
$("#box").css("width", "300px");
});
</script>
</body>
</html>jQuery Animation
jQuery's animate() is useful when the animation itself needs to be driven by JavaScript logic -- for example, animating to a value calculated at runtime that CSS alone has no way to know about.
Example: jQuery Animation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<script>
const target = Math.random() * 200 + 100;
$("#box").animate({width: target + "px"});
</script>
</body>
</html>CSS Class Toggle
A common hybrid pattern is using jQuery only to toggle a CSS class on and off, while the actual transition timing and easing are defined in a CSS rule -- combining jQuery's event handling with the browser's more efficient transition engine.
Example: CSS Class Toggle
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>.active { background: yellow; transition: background 0.3s; }</style>
<div id="box">Box</div>
<button id="btn">Toggle</button>
<script>
$("#btn").on("click", function() {
$("#box").toggleClass("active");
});
</script>
</body>
</html>Choose the Right Tool
As a rule of thumb, reach for CSS transitions when the effect is simple and state-based, and reach for jQuery's animate() when the animation depends on values or conditions computed in JavaScript.
Example: Choose the Right Tool
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>#box { transition: opacity 0.3s; }</style>
<div id="box">Simple hover fade via CSS</div>
<script>
$("#box").on("mouseenter", function() {
$(this).css("opacity", 0.5);
});
</script>
</body>
</html>Combining CSS and jQuery
It's common to split responsibilities: use jQuery to detect events and decide when something should happen, and let CSS handle how the resulting visual transition actually looks.
Example: Combining CSS and jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>.open { max-height:200px; transition: max-height 0.3s; }</style>
<div id="panel">Menu</div>
<button id="btn">Open</button>
<script>
$("#btn").on("click", function() {
$("#panel").toggleClass("open");
});
</script>
</body>
</html>Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: