10.1 Combined Animations
Complex animations can greatly enhance a user interface, making it more interactive and engaging. Creating such animations often involves a mix of CSS and JavaScript. Let's check out some advanced animation techniques, including more complex scenarios and interactivity.
Combining multiple animations using CSS lets you create intricate effects. Here's an example where an element changes size, rotates, and moves simultaneously.
Example: Combined Animations
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Animations</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div style="min-height: 250px; padding: 20px 0;">
<div class="box"></div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Animations</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code explanation:
.box: the element to which the combined animation is applied@keyframes combined: defines the animation that changes the scale, rotation, and position of the element
10.2 JavaScript Animations
The requestAnimationFrame function lets you create smooth animations with high performance. It syncs the animation with the screen refresh rate, making it smoother.
Example: Motion Animation using requestAnimationFrame
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation with requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div style="min-height: 60px; padding: 20px 0;">
<div class="ball"></div>
</div>
<script>
const ball = document.querySelector('.ball');
let start = null;
function animate(time) {
if (!start) start = time;
let progress = time - start;
ball.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation with requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Select the element with class "ball" and save it in the variable ball
const ball = document.querySelector('.ball');
// Variable to store the initial animation time
let start = null;
// Animation function
function animate(time) {
// If the animation starts for the first time, save the current time
if (!start) start = time;
// Calculate the time passed since the start of the animation
let progress = time - start;
// Set the ball's horizontal position based on the elapsed time
// Limit the max shift to 200 pixels
ball.style.left = Math.min(progress / 10, 200) + 'px';
// If less than 2000 milliseconds have passed, continue the animation
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Start the animation
requestAnimationFrame(animate);
</script>
</body>
</html>
Code explanation:
requestAnimationFrame: function that callsanimateto execute animation framesanimate: function that moves the.ballelement 200 pixels to the right over 2 seconds
10.3 Controlling CSS Animations with JavaScript
JavaScript can be used to control CSS animations by changing classes or element styles.
Example: Triggering a CSS Animation on Button Click
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation on Button Click</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div style="padding: 30px 0">
<div class="box" id="box"></div>
</div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation on Button Click</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
Code explanation:
.box.animate: a class that adds the moveAndRotate animation to the.boxelement- JavaScript: the
clickevent on the#startButtontoggles theanimateclass on the#boxelement, triggering the animation
10.4 Interacting with Animations via Events
Animation events like animationstart, animationend, and animationiteration allow tracking and controlling the animations.
Example: Tracking Animation Events
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tracking Animation Events</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation: scaleUp 2s infinite;
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('animationstart', () => {
console.log('Animation started');
});
box.addEventListener('animationend', () => {
console.log('Animation ended');
});
box.addEventListener('animationiteration', () => {
console.log('Animation iteration');
});
</script>
</body>
</html>
Code explanation:
animationstart: event that triggers at the start of the animationanimationend: event that triggers at the end of the animationanimationiteration: event that triggers each time the animation repeats
GO TO FULL VERSION