Есть ли способ сделать затухание в анимациях прокрутки, используя CSS или HTML только без Javascript?

Question

Я хочу иметь свой веб-сайт, где всякий раз, когда кто-то прокручивает страницу, изображение или текст постепенно исчезают. Я пытался найти способ выполнить sh, используя только CSS или HTML, так как создатель моего сайта не использует какой-либо другой язык, кроме CSS или HTML. Есть ли какой-нибудь код, который я мог бы использовать для выполнения sh этого?

Answer 1

Да, вы можете сделать это. С JQuery все намного проще, но CSS все равно будет работать.

<text id="my-text">I hope this helps</text>

<style>
    #my-text {
    font-size: 20px;
    text-align: center;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style>

Надеюсь, это поможет! Это будет работать с изображениями и текстом.

Проверьте это: https://www.w3schools.com/code/tryit.asp?filename=GCR2PD73HDF7