I have an image that was supposed to come from the back to the front using CSS animation, but the image gets cropped before it reaches the borders of the browser, here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation</title>
<style>
.container {
width: 100%;
height: 100%;
}
.fade-in-image {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
opacity: 0;
object-fit: cover;
animation: scaleAndfade 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes scaleAndfade {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<img class="fade-in-image" src="https://purepng.com/public/uploads/large/pink-heart-u4q.png" alt="" />
</div>
</body>
</html>Edit: What I want to achieve is at the beginning of the animation, the heart should show up as a whole, and as it reaches the browser boarders, the parts that went past the border gets cropped.