day09

动画

animation

A.@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
B.@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
div{
 animation:myfirst 2s;
}
div{
 animation:myfirst 2s infinite;  //无限循环
}

示例

        div{
            width:900px;
            height: 900px;
            background-color: aquamarine;
            position: relative;
        }
        @keyframes myfirst{
            0%{
                background-color: blueviolet;
            }
            30%{
                background-color: aqua;
            }
            70%{
                background-color: bisque;
            }
            100%{
                background-color: chartreuse;
            }
        }
/*        div{
            animation: myfirst 5s;
        }*/
        div{
            animation: myfirst 2s infinite;
        }
        div:hover{
            animation: none;
        }