css实现无限循环

动画，在css中可以通过transition、animation来完成。

比如我要实现一个按钮在渲染后500ms，完成一个旋转90°的动画，动画持续时长为2s。

1.使用transition完成

`

Button {

    width: 100px;

    height: 30px;

    margin-left: 30px;

    color: #333;

    vertical-align: middle;

    text-align: center;

    border: none;

    outline: none;

    transform-origin: 0 0;

    transform: rotate(0deg);

}

.rotate180-transition {

    transition: transform 2s ease-out 500ms;

}

Button:hover {

    transform: rotate(90deg);

}

`

2.使用animation实现

`

.rotate180-animation {

    animation: my-animation 2s ease-out 500ms 2;

}

@keyframes my-animation{

    0% {

        transform: rotate(0deg);

    }

    10% {

        transform: rotate(10deg);

    }

    20% {

        transform: rotate(20deg);

    }

    30% {

        transform: rotate(30deg);

    }

    40% {

        transform: rotate(40deg);

    }

    50% {

        transform: rotate(50deg);

    }

    60% {

        transform: rotate(60deg);

    }

    70% {

        transform: rotate(70deg);

    }

    80% {

        transform: rotate(80deg);

    }

    90% {

        transform: rotate(90deg);

    }

}

`

如果要实现无限动画只要修改animation的循环次数为infinite就可以了