day09 动画animation

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

//CSS