CSS3--动画（animation）（基础）

最新推荐文章于 2022-07-29 09:15:00 发布

李任贤

最新推荐文章于 2022-07-29 09:15:00 发布

阅读量247

点赞数

分类专栏：原创前端 CSS3 动画文章标签： CSS3 动画

本文链接：https://blog.csdn.net/LiRenxian0316/article/details/81116729

版权

原创同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

CSS3动画 animation

css3增加了一些很好用的特性，而现在说的是动画;

先写一个最简单的动画：

<!doctype html5>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        @keyframes an {         // 定义动画规则       
            from {background-color:red;}
            to {background-color:blue;}
        }
        #div1 {
            width:200px;        // 元素的基本样式
            height:200px;
            border: 2px solid pink;        
        
            animation-name: an;    // 绑定动画
            animation-duration:4s; //执行时间
        }
    </style>
</head>
<body>
    <div id="div1">
        我是会动的哦
    </div>
</body>
</html>

那些代码的动画效果是div元素从red到blue用了4秒时间去完成。

当然它不只是可以设置背景色，如果是这样那它基本上就没什么用了。