CSS element wiggling animation
CSS Element Shaking Animation
In web design, animation can add vitality and appeal to a page. Shaking is a common animation effect that draws users’ attention and makes a page more vivid by making an element sway back and forth horizontally or vertically. In this article, we’ll detail how to implement element shaking animation using CSS and provide several sample code examples for your reference.
1. Creating a wiggling animation using @keyframes
First, we can use the @keyframes rule to define a wiggling animation for an element. By specifying the percentages of the keyframes and the corresponding CSS styles, we can control the changes in the element during the animation. Here’s a simple example code that implements a horizontal sway animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: swing 2s infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we define a keyframe animation called swing that rotates the element by 0, 15, and 0 degrees at the 0%, 50%, and 100% keyframe positions, respectively. We then apply this animation to a <div> element with the .box class, looping it infinitely for 2 seconds.
2. Controlling the Speed and Direction of the Swing Animation
In addition to defining keyframes, we can also control the effect of the swing animation by adjusting the animation’s duration, number of loops, and direction. Here’s a sample code that shows how to control the speed, number of loops, and direction of a swing animation by adjusting the animation-duration, animation-iteration-count, and animation-direction properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #0f0;
animation: swing 1s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the animation duration to 1 second (animation-duration: 1s) and the number of loops to infinite (animation-iteration-count: infinite) and set the animation direction to alternate (<code>animation-direction: alternate) so that the element swings back and forth in a wobbling animation.
3. Use transform-origin to adjust the wiggle center point
By default, an element’s wiggle animation rotates around its center point. However, we can also adjust the rotation center of the element through the transform-origin property to change the effect of the shaking animation. Here’s a code example showing how to change the rotation center of an element by adjusting the transform-origin property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #00f;
animation: swing 1s infinite;
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the element’s rotation center to the top left corner (transform-origin: top left), causing the element to rotate around the top left corner during the swing animation.
4. Use animation-timing-function to adjust the sway speed curve
In addition to adjusting the animation duration and number of loops, we can also use the animation-timing-function property to adjust the sway animation’s speed curve, thereby changing the animation’s acceleration and deceleration. Here’s a sample code example showing how to change the speed curve of a swing animation by adjusting the animation-timing-function property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #ff0;
animation: swing 1s infinite;
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the animation’s speed curve to ease in and out (animation-timing-function: ease-in-out), causing the element to accelerate and decelerate during the wiggling animation.
5. Delay the wiggling animation using animation-delay
Sometimes, we want to delay the start of an element’s wiggling animation so that the animation begins some time after the page loads. In these cases, we can use the animation-delay property to set the animation delay. Here’s a sample code example showing how to delay an element’s swing animation by adjusting the animation-delay property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #0ff;
animation: swing 1s infinite;
animation-delay: 1s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the animation delay to 1 second (animation-delay: 1s), causing the element to start the swing animation after a delay of 1 second after the page loads.
6. Use animation-fill-mode to set the animation’s end state
By default, an element returns to its pre-animation state after an animation completes. However, you can also use the animation-fill-mode property to set the element’s end state. Here’s a sample code example showing how to adjust the animation-fill-mode property to set the state of an element after the animation ends:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #f0f;
animation: swing 1s infinite;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the element’s state to the end state (animation-fill-mode: forwards) after the animation ends, so that the element remains in the state of the last frame after the animation ends.
7. Use animation-play-state to control the animation play state
Sometimes, we want to control the animation play state through user interaction, such as pausing or resuming the animation. In this case, we can use the animation-play-state property to control the animation play state. The following is a sample code that demonstrates how to control the play state of an animation by adjusting the animation-play-state property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #0f0;
animation: swing 1s infinite;
}
.paused {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="pauseAnimation()">Pause Animation</button>
<script>
function pauseAnimation() {
document.querySelector('.box').classList.toggle('paused');
}
</script>
</body>
</html>
Output:
In the example code above, we call the pauseAnimation() function by clicking a button, toggling the element’s paused class and thus controlling the animation’s playback state.
8. Controlling Sway Direction with animation-direction
In addition to swaying an element horizontally, we can also control the direction of the sway by adjusting the animation-direction property. Here’s a sample code example showing how to control the swing direction of an element by adjusting the animation-direction attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #00f;
animation: swing 1s infinite;
animation-direction: reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the animation direction to reverse ( animation-direction: reverse ), causing the element to swing counterclockwise.
9. Separate animation properties using animation-name and animation-duration
Sometimes, we want to define the animation name and duration separately so that they can be reused in different places. In this case, we can use the animation-name and animation-duration properties to separate the animation properties. The following is a sample code that demonstrates how to implement a swing animation of an element by separating the animation properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #f0f;
animation-name: swing;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example code above, we set the animation name to swing (animation-name: swing) and the duration to 1 second (animation-duration: 1s), causing the element to loop infinitely in the swing animation.
10. Use animation-play-state and JavaScript to control animation playback
In addition to controlling the animation playback state through CSS properties, we can also control animation playback through JavaScript. The following is a sample code that demonstrates how to control the swing animation of an element through JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Swing Animation</title>
<style>
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
.box {
width: 100px;
height: 100px;
background-color: #0f0;
animation: swing 1s infinite;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="toggleAnimation()">Toggle Animation</button>
<script>
let isPaused = false;
function toggleAnimation() {
const box = document.querySelector('.box');
if (isPaused) {
box.style.animationPlayState = 'running';
isPaused = false;
} else {
box.style.animationPlayState = 'paused';
isPaused = true;
}
}
</script>
</body>
</html>
Output:
In the example code above, we call the toggleAnimation() function by clicking a button to toggle the element’s animation state. If the animation is paused, it is set to running, and vice versa.