初识CSS3之动画模块

最新推荐文章于 2023-01-11 15:14:58 发布

407指导员

最新推荐文章于 2023-01-11 15:14:58 发布

阅读量119

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110351613

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

CSS3之动画模块

与过度模块之间的区别

不同点

过度模块必须人为触发才会执行动画

动画模块不需要人为触发就可以执行的动画

相同点

过度模块和动画模块都是用来给元素添加动画的

过度和动画模块都是系统新增的属性

过度和动画模块都需要满足三要素才会有动画效果

动画模块三要素

CSS3 animation-name 属性

1.告诉系统需要执行哪个动画。

animation-name: lnj;

@keyframes 规则

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

2.告诉系统我们需要自己创建一个名称叫lnj的动画

@keyframes lnj {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 500px;
    }
}

CSS3 animation-duration 属性

3.告诉系统动画持续的时长

animation-duration: 3s;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /*1.告诉系统需要执行哪个动画*/
            animation-name: lnj;
        /* 3.告诉系统动画持续的时长*/
            animation-duration: 3s;
        }
    /*2.告诉系统我们需要自己创建一个名称叫lnj的动画*/
        @keyframes lnj {
            from {
                margin-left: 0;
            }

            to {
                margin-left: 500px;
            }
        }

    </style>
</head>
<body>
<div></div>
</body>
</html>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20201129195347885.gif)

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS3之动画模块

CSS3之动画模块与过度模块之间的区别不同点过度模块必须人为触发才会执行动画动画模块不需要人为触发就可以执行的动画相同点过度模块和动画模块都是用来给元素添加动画的过度和动画模块都是系统新增的属性过度和动画模块都需要满足三要素才会有动画效果动画模块三要素CSS3 animation-name 属性1.告诉系统需要执行哪个动画。animation-name: lnj;@keyframes 规则值描述animationname必需。定义动画的名称。keyf
复制链接

扫一扫

专栏目录