CSS animation tofu block bounce
CSS Animated Bounce Blocks
In website design and development, animation effects can greatly enhance user experience and page appeal. CSS animations are a simple and effective way to create animation effects. In this article, we’ll detail how to use CSS animations to create a bouncing block effect.
Bounce Block Animation Effect
The bounce block animation effect involves a block bouncing around a page. In this effect, the block moves continuously horizontally and vertically, bouncing off boundaries. This animation creates the illusion of an object moving freely through space, adding dynamism and interest to the page.
Implementation steps
1. Creating the HTML Structure
First, we need to create a simple HTML structure to hold the box elements. In this example, we create a <div> element as our tofu block. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Tofu Bounce</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tofu"></div>
</body>
</html>
2. Add CSS Styles
Next, we need to style and animate the tofu blocks using CSS. We use the transform property to make the blocks move and bounce, and the @keyframes rule to define the animation keyframes.
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.tofu {
width: 50px;
height: 50px;
background-color: #3498db;
position: relative;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-100px); }
}
In the code above, we define a .tofu class to set the style and color of the tofu block. We also define the @keyframes rule to specify the keyframes for the animation. In this example, the tofu block remains in the same position at 0% and 100% animation, and moves 100 pixels upward at 50%.
3. Viewing the Effect
Finally, we can view the bouncing tofu block animation in our browser. Save the above HTML and CSS code as files and open them in a browser to see the tofu block bouncing around the page.
Summary
This article introduced how to use CSS animation to create a bouncing tofu block effect. Using simple HTML structure and CSS styles, we can create an engaging and fun animation effect, enhancing the user experience and appeal of a web page.