.wooden-frame {
width: 100%;
height: 100%;
transform: scale(2);
opacity: 0;
overflow: hidden;
} @keyframes frameAppear {
0% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.landscape-image__container {
overflow: hidden;
position: relative;
top: 20px;
left: 50%;
transform: translateX( -50%);
width: 90%;
height: 92%;
}
@media screen and (max-width: 480px) {
.landscape-image__container {
top: 2px;
}
}
.landscape-image {
position: absolute;
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.frame-animate {
overflow: hidden;
animation: frameAppear 0.8s ease-out forwards;
} @keyframes imageBounce {
0% {
top: -400px; }
40% {
top: 15px; }
55% {
top: 5px; }
70% {
top: 12px; }
80% {
top: 8px; }
100% {
top: 15px; }
}
.image-animate {
animation: imageBounce 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}