CSS-анимации работают в CodePen, но не работают после помещения их в проект ASP.Net - PullRequest
Новая
       9

CSS-анимации работают в CodePen, но не работают после помещения их в проект ASP.Net

0 голосов
/ 10 января 2019

Я сделал определенный дизайн в codepen с фоновой анимацией, и он работает там, но он не работает, когда я помещаю его в свой проект ASP.Net Core. Я знаю, что ссылаюсь на файл правильно, потому что цвет фона показывает, он просто не анимируется. Я думал, что это просто проблема с Chrome, но он не работает и в Firefox. Единственное, что я не проверял, так это проверял, работал ли он в обычном IIS вместо IIS Express.

Код:

CSS: 

body{
    margin:0;
    padding:0;
    background:0 0;
}

.parallaxBackground {
    min-height:100%;
    min-width:100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.colorcycle {
    min-height: 100%;
    min-width: 100%;
    display: inline-block;
    text-align: center;
    background: linear-gradient(271deg, #e7ff26, #2ecc00, #ff3b00, #2a9fff);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    -o-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;

    -webkit-keyframes AnimationName {
        0% {
            background-position: 92% 0%
        }

        50% {
            background-position: 9% 100%
        }

        100% {
            background-position: 92% 0%
        }
    }

    @-moz-keyframes AnimationName {
        0% {
            background-position: 92% 0%
        }

        50% {
            background-position: 9% 100%
        }

        100% {
            background-position: 92% 0%
        }
    }

    @-o-keyframes AnimationName {
        0% {
            background-position: 92% 0%
        }

        50% {
            background-position: 9% 100%
        }

        100% {
            background-position: 92% 0%
        }
    }

    @keyframes AnimationName {
        0% {
            background-position: 92% 0%
        }

        50% {
            background-position: 9% 100%
        }

        100% {
            background-position: 92% 0%
        }
    }
}

HTML: 

<body>
    <!--Parallax Landing Section-->
    <div class="parallaxBackground">
        <div class="colorcycle">testing testing testing </div>
    </div>
    <!--Parallax Landing Section-->
</body>

Редактировать: Итак, я проверил это отдельно от всего. Я просто создал простую папку на рабочем столе и поместил мои HTML и CSS в соответствующие файлы и попробовал это так. Никаких других ссылок на JS, Bootstrap или что-либо еще. Получил ту же проблему. Так что я не думаю, что это что-то в моем проекте блокирует, это должно быть так, как это обрабатывается. Единственное, о чем я могу думать, - это то, что на Codepen CSS находятся в файле .scss, но я не думал, что это что-то изменит. Я проверю это, но кроме этого, я понятия не имею. Мне просто нужно найти альтернативу.

1 Ответ

0 голосов
/ 11 января 2019

Разобрался. В SASS есть вложенные селекторы, но это не работает в обычном CSS. Я просто должен был удалить их из класса, и это заставило его работать. 

.colorcycle {
    min-height: 100%;
    min-width: 100%;
    display: inline-block;
    text-align: center;
    background: linear-gradient(271deg, #e7ff26, #2ecc00, #ff3b00, #2a9fff);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    -o-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}


@-webkit-keyframes AnimationName {
    0% {
        background-position: 92% 0%
    }

    50% {
        background-position: 9% 100%
    }

    100% {
        background-position: 92% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 92% 0%
    }

    50% {
        background-position: 9% 100%
    }

    100% {
        background-position: 92% 0%
    }
}

@-o-keyframes AnimationName {
    0% {
        background-position: 92% 0%
    }

    50% {
        background-position: 9% 100%
    }

    100% {
        background-position: 92% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 92% 0%
    }

    50% {
        background-position: 9% 100%
    }

    100% {
        background-position: 92% 0%
    }
}
...