动画的使用

最新推荐文章于 2024-10-16 23:00:23 发布

科院彭于晏

最新推荐文章于 2024-10-16 23:00:23 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/yanhn123/article/details/124669968

版权

制作动画分两步

1.定义动画

 @keyframes donghuamingcheng{
            0%{
              width: 100px;  
            }
            100%{
                width: 200px;
            }
        }

@keyframes后面定义动画名称,方便使用

0%后是动画开始时的样子

100%后是动画结束时的样子

2.使用动画

添加 animation-name: donghuamingcheng;来调用我们刚才定义的动画

添加 animation-duration: 2s;来定义动画的持续时间

 div{
            width: 100px;
            height: 100px;
           animation-name: donghuamingcheng;
           animation-duration: 2s;
           background-color: red;
        }