CSS3学习笔记（十四）——动画Keyframes

最新推荐文章于 2021-07-24 21:49:21 发布

置顶 Bambi12

最新推荐文章于 2021-07-24 21:49:21 发布

阅读量373

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Bambi12/article/details/84796971

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

animation可以实现多组属性之间变换

Keyframes被称为关键帧，在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Keyframes</title>
    <style>
        @keyframes changecolor{
            0%{
                background: red;
            }
            20%{
                background: blue;
            }
            40%{
                background: yellow;
            }
            60%{
                background: green;
            }
            80%{
                background: orange;
            }
            100%{
                background: red;
            }
        }
        div{
            width: 100px;
            height: 100px;
            margin: 100px 100px;
            background: red;
        }
        div:hover{
            width: 100px;
            height: 100px;
            margin: 100px 100px;
            animation: changecolor 5s ease-out .2s;
        }
    </style>
</head>
<body>
    <div>鼠标放我身上</div>
</body>
</html>

笔记整理出自：https://www.imooc.com/learn/33