CSS remove animation
CSS Remove Animation
In web design, animation effects can add liveliness and appeal to pages, and CSS animation is a common way to achieve this effect. In this article, we’ll focus on transition animations in CSS, demonstrating how to use CSS to achieve various transition animation effects through code examples.
1. Creating a Transition Animation Using @keyframes
First, we can use the @keyframes rule to define a transition animation and then apply it to an element. Here’s a simple example code that implements an animation effect that moves from left to right:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Out Animation Example</title>
<style>
@keyframes slideOutRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: slideOutRight 1s forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Result:
In the example code above, we define a @keyframes rule named slideOutRight to create an animation that moves from left to right and gradually fades away. We then apply this animation to a div> element with the .box class to achieve the desired transition animation.
2. Using the transition Property to Create a Transition Animation
In addition to using the @keyframes rule, we can also use the transition property to create a transition animation. Here is a sample code that implements a top-down animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Out Animation Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0f0;
transition: transform 1s, opacity 1s;
}
.box:hover {
transform: translateY(100%);
opacity: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In the example code above, we use the transition attribute to define the transition effects of the transform and opacity properties. When the mouse hovers over the .box element, the removal animation is triggered, and the element moves out from the top to the bottom and gradually disappears.
3. Using the transform Attribute to Implement the Removal Animation
In addition to using the @keyframes rule and the transition attribute, we can also directly use the transform attribute to implement the removal animation effect. The following is a sample code that implements an animation effect that moves from right to left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Move Out Animation Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #00f;
transform: translateX(0);
transition: transform 1s, opacity 1s;
}
.box:hover {
transform: translateX(-100%);
opacity: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In the example code above, we directly use the transform attribute on the .box element and combine it with the transition attribute to achieve an animation effect that moves out from right to left and gradually disappears.
4. Using the animation Property to Implement Complex Exit Animations
In addition to simple exit animations, we can also create more complex exit animations by combining the @keyframes rule and the animation property. The following is a sample code that implements an animation effect that moves from bottom to top:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS move-out animation example</title>
<style>
@keyframes slideOutUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
opacity: 0;
}
}
.box {
width: 100px;
height: 100px;
background-color: #ff0;
animation: slideOutUp 1s forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In the example code above, we define a @keyframes rule named slideOutUp to implement an animation effect that moves out from the bottom to the top and gradually disappears. We then apply this animation to a .box
5. Use the transform property to implement a rotational animation
In addition to linear movement animation, we can also achieve different animation effects by rotating elements. Here is a sample code that implements a rotating and moving animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Moving Animation Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0ff;
transform: rotate(0);
transition: transform 1s, opacity 1s;
}
.box:hover {
transform: rotate(360deg);
opacity: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Run Results:
In the example code above, we use the transform property to create a rotating, fade-out animation effect. When the mouse hovers over the .box element, the element rotates 360 degrees and fades away.
6. Using the animation Property to Create a Flashing Removal Animation
In addition to linear movement and rotational animation effects, we can also create different removal animation effects by flashing elements. Here’s a sample code that implements a blinking animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS blinking animation example</title>
<style>
@keyframes blinkOut {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.box {
width: 100px;
height: 100px;
background-color: #f0f;
animation: blinkOut 1s infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In the example code above, we define a @keyframes rule named blinkOut to implement a blinking out animation effect. We then apply this animation to a .box
7. Use the transform property to implement zoom-out animations
In addition to linear movement, rotation, and flashing animations, we can also achieve different zoom-out animation effects by scaling elements. Here is a sample code that implements a zoom-out animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS zoom-out animation example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0f0;
transform: scale(1);
transition: transform 1s, opacity 1s;
}
.box:hover {
transform: scale(0);
opacity: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Run Results:
In the example code above, we use the transform property to create a zooming, moving-out, and fading animation effect. When the mouse hovers over the .box element, the element shrinks and gradually disappears.
8. Using the animation Property to Implement a Jittering Removal Animation
In addition to the animation effects described previously, we can also achieve different removal animation effects by jittering the element. Here is a sample code that implements a shake-out animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS shake-out animation example</title>
<style>
@keyframes shakeOut {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
.box {
width: 100px;
height: 100px;
background-color: #ff0;
animation: shakeOut 1s infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In the example code above, we define a @keyframes rule named shakeOut to implement a shake-out animation effect. We then apply this animation to a .box
9. Using the transform Property to Implement Flip-Out Animation
In addition to the animation effects described previously, we can also create different exit animation effects by flipping elements. Here is a sample code that implements a transition animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS transition animation example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0ff;
transform: rotateY(0);
transition: transform 1s, opacity 1s;
}
.box:hover {
transform: rotateY(180deg);
opacity: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Run Results:
In the example code above, we use the transform property to create a flipping and fading animation effect. When the mouse hovers over the .box element, the element flips 180 degrees along the Y axis and gradually disappears.
10. Using the animation Property to Create a Bounce Remove Animation
In addition to the animation effects described previously, we can also use bouncing elements to create different remove animation effects. Here is a sample code that implements a bounce animation effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Out Animation Example</title>
<style>
@keyframes bounceOut {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.box {
width: 100px;
height: 100px;
background-color: #f0f;
animation: bounceOut 1s forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Running Results:
In the example code above, we define a @keyframes rule named bounceOut to implement a bouncing out animation effect. We then apply this animation to a <div> element with the .box class, creating a bouncing and gradually disappearing animation effect.
Through the above example code, we demonstrate how to use CSS to achieve a variety of exit animation effects, including linear movement, rotation, flashing, scaling, shaking, flipping, and bouncing. These animation effects can add liveliness and appeal to web pages, enhancing the user experience.