知识点九

动画animation

//定义：@keyframes （//关键帧）

1、@keyframes myfirst
{
form{background:red;}
to{background:yellow；}
}

例子：

//HTML

~~

//CSS

 .box{
            width: 100px;
            height: 100px;
            background-color: orange;
  @keyframes aa {
            from{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
        }

2、@keyframes myfirst
{
0%{background:red;}
25%{background:yellow；}
50%{background:blue；}
100%{background:green；}
}

例子：

//HTML

//CSS
   /*.box:hover{*/
            /*animation: bb 15s ;*/
        /*}*/

 @keyframes  bb {
            0%{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            20%{
                width: 400px;
                height: 100px;
                background-color: yellow;
            }
            40%{
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            60%{
                width: 100px;
                height: 500px;
                background-color: aquamarine;
            }
            80%{
                width: 100px;
                height: 300px;
                background-color: orange;
            }
            100%{
                width: 100px;
                height: 500px;
                background-color: orange;
            }
        }

animation 动画片制作

div {animation:myfirst 2s;}
//动画片：我的第一次2秒

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

B、今天掌握了什么

动画animation

//定义：@keyframes （//关键帧）

1、@keyframes myfirst
{
form{background:red;}
to{background:yellow；}
}

例子：

//HTML

~~

//CSS

 .box{
            width: 100px;
            height: 100px;
            background-color: orange;
  @keyframes aa {
            from{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
        }

2、@keyframes myfirst
{
0%{background:red;}
25%{background:yellow；}
50%{background:blue；}
100%{background:green；}
}

例子：

//HTML

//CSS
   /*.box:hover{*/
            /*animation: bb 15s ;*/
        /*}*/

 @keyframes  bb {
            0%{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            20%{
                width: 400px;
                height: 100px;
                background-color: yellow;
            }
            40%{
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            60%{
                width: 100px;
                height: 500px;
                background-color: aquamarine;
            }
            80%{
                width: 100px;
                height: 300px;
                background-color: orange;
            }
            100%{
                width: 100px;
                height: 500px;
                background-color: orange;
            }
        }