I am looking to add an animation effect to the H1 element in my program. I want it to smoothly appear from the bottom hidden position using a CSS transition when the page loads. How can I achieve this? Additionally, I need the height of the bounding element to remain fixed while the text pops up from the bottom in CSS. What would be the most effective method to accomplish this task? Below is the code snippet:
import "./styles.css";
export default function App() {
return (
<div className="App" id="heading">
<div className="bounding">
<h1 className="boundingelem">Product</h1>
</div>
</div>
);
}
The corresponding CSS code is provided below:
.App {
font-family: sans-serif;
text-align: center;
font-size: 9vw;
text-transform: uppercase;
font-weight: 900;
line-height: 1;
}
.bounding {
width: fit-content;
background-color: orange;
overflow: hidden;
height: 150px;
}
.bounding .boundingelem {
transform: translateY(10%);
}
.bounding .boundingelem::before {
content: "Product";
position: absolute;
color: white;
top: -4px;
left: -4px;
-webkit-text-stroke: 2px red;
}