/*动画规则1*/
@keyframes myfirst {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(90deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    75% {
        transform: rotateZ(270deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    0% {
        -moz-transform: rotateZ(0deg);
    }

    25% {
        -moz-transform: rotateZ(90deg);
    }

    50% {
        -moz-transform: rotateZ(180deg);
    }

    75% {
        -moz-transform: rotateZ(270deg);
    }

    100% {
        -moz-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0% {
        -webkit-transform: rotateZ(0deg);
    }

    25% {
        -webkit-transform: rotateZ(90deg);
    }

    50% {
        -webkit-transform: rotateZ(180deg);
    }

    75% {
        -webkit-transform: rotateZ(270deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

@-o-keyframes myfirst /* Opera */ {
    0%;

{
    -o-transform: rotateZ(0deg);
}

25% {
    -o-transform: rotateZ(90deg);
}

50% {
    -o-transform: rotateZ(180deg);
}

75% {
    -o-transform: rotateZ(270deg);
}

100% {
    -o-transform: rotateZ(360deg);
}

}

@-ms-keyframes myfirst {
    0% {
        -ms-transform: rotateZ(0deg);
    }

    25% {
        -ms-transform: rotateY(90deg);
    }

    50% {
        -ms-transform: rotateZ(180deg);
    }

    75% {
        -ms-transform: rotateZ(270deg);
    }

    100% {
        -ms-transform: rotateZ(360deg);
    }
}

/*动画规则2*/
@keyframes myfirst2 {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(90deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    75% {
        transform: rotateZ(270deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@-moz-keyframes myfirst2 /* Firefox */
{
    0% {
        -moz-transform: rotateZ(0deg);
    }

    25% {
        -moz-transform: rotateZ(90deg);
    }

    50% {
        -moz-transform: rotateZ(180deg);
    }

    75% {
        -moz-transform: rotateZ(270deg);
    }

    100% {
        -moz-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes myfirst2 /* Safari 和 Chrome */
{
    0% {
        -webkit-transform: rotateZ(0deg);
    }

    25% {
        -webkit-transform: rotateZ(90deg);
    }

    50% {
        -webkit-transform: rotateZ(180deg);
    }

    75% {
        -webkit-transform: rotateZ(270deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

@-o-keyframes myfirst2 /* Opera */ {
    0%;

{
    -o-transform: rotateZ(0deg);
}

25% {
    -o-transform: rotateZ(90deg);
}

50% {
    -o-transform: rotateZ(180deg);
}

75% {
    -o-transform: rotateZ(270deg);
}

100% {
    -o-transform: rotateZ(360deg);
}

}

@-ms-keyframes myfirst2 {
    0% {
        -ms-transform: rotateZ(0deg);
    }

    25% {
        -ms-transform: rotateY(90deg);
    }

    50% {
        -ms-transform: rotateZ(180deg);
    }

    75% {
        -ms-transform: rotateZ(270deg);
    }

    100% {
        -ms-transform: rotateZ(360deg);
    }
}

/*动作1*/
.action1 {
    cursor: pointer;
    border-radius: 1240px;
    width: 60%;
}

    .action1:hover {
        animation: myfirst 0.6s linear;
        -moz-animation: myfirst 0.6s linear; /* Firefox */
        -webkit-animation: myfirst 0.6s linear; /* Safari 和 Chrome */
        -o-animation: myfirst 0.6s linear;
        -ms-animation: myfirst 0.6s linear;
    }

/*动作2*/
.action2 {
    cursor: pointer;
}

    .action2:hover {
        animation: myfirst2 0.6s linear;
        -moz-animation: myfirst2 0.6s linear; /* Firefox */
        -webkit-animation: myfirst2 0.6s linear; /* Safari 和 Chrome */
        -o-animation: myfirst2 0.6s linear;
        -ms-animation: myfirst2 0.6s linear;
    }