css3动画transform-太极图

学习动画，记录一下。
HTML部分：类似图标，所以用了i标签。

<i class="taichi"></i>

css部分：

    .taichi {
        display: block;
        width: 400px;
        height: 400px;
        background: linear-gradient(to right, black 50%, white 50%);/*从左边往右边 先黑色到50%换成白色*/
        margin: 0 auto;
        margin-top: 100px;
        border-radius: 50%;
        animation: change3 5s infinite linear;
         /* 动画属性： 动画名称  播出时长 不停的播  匀速的旋转  */
    }
    .taichi::before,.taichi::after{
        display: block;
        content: '';
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin: 0 auto;
    }
    .taichi::before{
        background: radial-gradient(white 25%, black 25%); /*从里往外 先白色到25%换成黑色*/
        /* animation: change 1s infinite alternate linear; */
        /* 动画属性： 动画名称  播出时长  不停的播  倒放 匀速的旋转*/
        animation: change 1s infinite alternate ease-in-out;
        /* 动画属性： 动画名称  播出时长  不停的播  倒放 缓慢的变化*/
        animation-delay: -1s; /* 提前一秒     从大变小*/
        transform-origin: 50% 0;
        /* 设置元素的基点位置 */
    }
    .taichi::after{
        background: radial-gradient(black 25%, white 25%);
        animation: change 1s infinite alternate ease-in-out;
        /* 动画属性： 动画名称  播出时长  不停的播  倒放 缓慢的变化*/
        transform-origin: 50% 100%;
    }
    @keyframes change{
        from {
            transform: scale(0.5);
        }
        to {
            transform: scale(1.5);
        }
        /* 0-1s  从小变大
           1-2s  从大变小*/
    }
    @keyframes change3{
        from {
            transform: rotate(0deg);/* 旋转属性，角度 */
        }
        to {
            transform: rotate(360deg);
        }
    }