1.动画animation

1.1 第一种方式

//CSS
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

1.2 第二种方式

//CSS
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

div{
 animation:myfirst 2s;
}
div{
 animation:myfirst 2s infinite;  //无限循环
}

2 自己代码如下

//HTML
<div></div>

//CSS
<style>
        div{
            width: 200px;
            height: 300px;
            background-color: pink;
            border-radius: 150px;
            margin: 100px;
        }
        div:hover{
            animation: yxh 3s infinite;  //无限循环 infinite
        }
        @keyframes yxh {

             // 第一种方式
            /*0%{background-color: red;width: 400px;height: 400px}*/
            /*25%{background-color: yellow}*/
            /*50%{background-color: blue}*/
            /*100%{background-color: turquoise}*/

            // 第二种方式
            from{
                background-color: red;
                transform:rotate(360deg)
            }
            to{
                background-color: darkblue;
                height: 500px;
                width: 900px;
                border-radius: 450px;
            }
        }
    </style>