纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况

<div class="img-line"><span>
	<div class="item"><img src="img/site_013.d0843f44.png" alt="飘域家园" title="飘域家园"></div>
	<div class="item"><img src="img/site_014.0ef88737.png" alt="襄阳论坛" title="襄阳论坛"></div>
	<div class="item"><img src="img/site_015.7f821c05.png" alt="宠略" title="宠略"></div>
	<div class="item"><img src="img/site_016.bf851e60.png" alt="爱游网" title="爱游网"></div>
	<div class="item"><img src="img/site_017.f60dac90.png" alt="买米网" title="买米网"></div>
	<div class="item"><img src="img/site_018.94e5b837.png" alt="兔客" title="兔客"></div>
</span><span>
	<div class="item"><img src="img/site_013.d0843f44.png" alt="飘域家园" title="飘域家园"></div>
	<div class="item"><img src="img/site_014.0ef88737.png" alt="襄阳论坛" title="襄阳论坛"></div>
	<div class="item"><img src="img/site_015.7f821c05.png" alt="宠略" title="宠略"></div>
	<div class="item"><img src="img/site_016.bf851e60.png" alt="爱游网" title="爱游网"></div>
	<div class="item"><img src="img/site_017.f60dac90.png" alt="买米网" title="买米网"></div>
	<div class="item"><img src="img/site_018.94e5b837.png" alt="兔客" title="兔客"></div>
</span></div>

.site-container .range-container {
    width: 1154px;
    margin: 0 auto;
    overflow: hidden
}

.site-container .range-container .img-line {
    width: 2308px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    -webkit-animation: scrollToRight-data-v-2186f80e 36s linear infinite;
    -moz-animation: scrollToRight-data-v-2186f80e 36s linear infinite;
    animation: scrollToRight-data-v-2186f80e 36s linear infinite
}

.site-container .range-container .img-line:nth-of-type(2) {
    -webkit-animation: scrollToRight-data-v-2186f80e 20s linear infinite;
    -moz-animation: scrollToRight-data-v-2186f80e 20s linear infinite;
    animation: scrollToRight-data-v-2186f80e 20s linear infinite
}



@-webkit-keyframes scrollToRight-data-v-2186f80e {
    0% {
        -webkit-transform: translate3d(-50%,0,0);
        -moz-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0)
    }

    to {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-moz-keyframes scrollToRight-data-v-2186f80e {
    0% {
        -webkit-transform: translate3d(-50%,0,0);
        -moz-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0)
    }

    to {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes scrollToRight-data-v-2186f80e {
    0% {
        -webkit-transform: translate3d(-50%,0,0);
        -moz-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0)
    }

    to {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        transform: translateZ(0)
    }
}