立方体动图效果

css样式代码：

.big{

            width: 1000px;

            height: 300px;

            border: 1px solid #000;

            margin: 100px auto;

        }

        .small{

            width: 100px;

            height: 100px;

            margin-top: 100px;

            background-color: #f0f;

        }

        @keyframes cygg{

            0%{

                transform:scale(1) rotate(0deg)

            }

           

            25%{

                transform: scale(2) rotate(720deg);

                margin-left: 450px;

            }

            50%{

                transform: scale(1) rotate(1440deg);

                margin-left: 900px;

            }

            75%{

                transform: scale(2) rotate(720deg);

                margin-left: 450px;

            }

            100%{

                transform: scale(1) rotate(0deg);

                margin-left: 0;

            }

        }

　　注意：过渡属性如果放在hover中修饰，表示只有鼠标移入的时候才会有过渡效果，移出的时候就没有过渡效果了，如果要在鼠标移入和移出的时候都能有过渡效果，就需要将过渡属性修饰在标签样式中。　　因为hover中修饰的样式，只有鼠标移入的时候才会执行，移出就不会执行了。

　　如果需要鼠标移入、移出都有过渡这个效果则只需要对小div进行设置一下这个属性与属性值即可。

        .big:hover .small{

            animation: cygg 10s linear;

        }

主体代码：

<div class="big">

        <div class="small"></div>

    </div>