bottom animation don't work

Hey ! I don't know why it doesnt work. Can you help me please ? Thx.

<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;
    }
}

2 Replies

Alex•3mo ago

animation:linear is overwriting your other properties. You need to replace it with animation-timing-function: linear. https://codepen.io/Beanie127/pen/QWXpEEV specifically, if you use the animation shorthand property and don't specify an animation duration, it defaults to 0 and plays immediately

PM_vlax•3mo ago

thx a lot !

Gaming

Programming

bottom animation don't work