Диаграмма ключевого кадра CSS не может иметь более 180 градусов - PullRequest
Новая
       7

Диаграмма ключевого кадра CSS не может иметь более 180 градусов

0 голосов
/ 23 октября 2018

для моего проекта я использую эту диаграмму: http://jsfiddle.net/3nthq7kw/

, но когда 1 из кусков становится больше 180 градусов, он больше не работает правильно.(см. http://jsfiddle.net/jLtwnm42/ например)

У кого-нибудь есть идеи, как это исправить?Во время поиска решений я нашел этот вопрос о стековом потоке , но я не знаю, как заставить это работать для меня ...

Это код ключевого кадра из моей диаграммы: 

    #part1 {
        transform: rotate(0deg);
    }

        #part1 .circle {
            background-color: #009e73;
            animation: first 0.5s forwards;
        }

    #part2 {
        transform: rotate(110deg);
    }

        #part2 .circle {
            background-color: #d55e00;
            animation: second 0.5s forwards 0.5s;
        }

    #part3 {
        transform: rotate(140deg);
    }

        #part3 .circle {
            background-color: #f0e442;
            animation: third 0.5s forwards 1s;
        }

    #part4 {
        transform: rotate(190deg);
    }

        #part4 .circle {
            background-color: #cc79a7;
            animation: fourth 0.5s forwards 1.5s;
        }



    /* Animation */
    @keyframes first {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(110deg);
        }
    }

    @keyframes second {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(30deg);
        }
    }

    @keyframes third {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(50deg);
        }
    }

    @keyframes fourth {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(170deg);
        }
    }
...