CSS关键帧图表不能超过180度

Question

对于我的项目，我是否使用以下图表：http://jsfiddle.net/3nthq7kw/

但是当其中1个大于180度时，它将不再起作用。 （例如，参见http://jsfiddle.net/jLtwnm42/）

有人对如何解决这个问题有想法吗？在寻找解决方案的过程中，我发现了this stackoverflow question，但我不知道如何使这项工作对我有利...

这是我图表中的关键帧代码：

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