bottom animation don't work

<img src="images/californien.jpg" alt="Massage Californien" class="animation"\>

<img src="images/californien.jpg" alt="Massage Californien" class="animation"\>

.animation {
    animation: linear;
    animation-timeline: view();
    animation-range: entry;
}

img {
    height: 75vh;
    border-radius: 5vh;
    box-shadow: 0 0 5vh rgba(0, 0, 0, 0.5);
    animation-name: bottom;
}

@keyframes bottom {
    from {
        translate: 0 100%;
        opacity: 0;
    }
    to {
        translate: 0;
        opacity: 1;
    }
}

.animation {
    animation: linear;
    animation-timeline: view();
    animation-range: entry;
}

img {
    height: 75vh;
    border-radius: 5vh;
    box-shadow: 0 0 5vh rgba(0, 0, 0, 0.5);
    animation-name: bottom;
}

@keyframes bottom {
    from {
        translate: 0 100%;
        opacity: 0;
    }
    to {
        translate: 0;
        opacity: 1;
    }
}