css 动画——animation属性（含transition）

原创已于 2022-06-03 14:23:24 修改 · 377 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #动画 #css3

于 2022-06-03 14:11:00 首次发布

前端零零散散专栏收录该内容

27 篇文章

订阅专栏

本文介绍了CSS动画的基础概念，包括关键帧的设置、@keyframes规则，以及animation属性的语法。同时，详细对比了animation与transition的区别，展示了如何在实际项目中使用这些技术来创建动态效果。

文章目录

1. 什么是css动画

动画就是使元素从一种样式逐渐变化为另一种样式的效果。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。

2. 关键帧 `@keyframes` 规则

如需使用 CSS 动画，首先必须为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

设置关键帧：

/*@keyframes后跟的是关键帧的名字（可以随便起）*/
  @keyframes name {
            /*from表示动画的开始位置 也可以使用0%*/
            from{
                margin-left: 0;
            }

            /*to动画的结束位置 也可以使用100%*/
            to{
                margin-left: 700px;
            }
        }

要使动画生效，必须将动画绑定到某个元素。

3. animation属性语法

animation: name duration timing-function delay iteration-count direction;

在这里插入图片描述

4. 示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation属性</title>
    <style>
        body{
            background-color: #000;
        }

        .blink div {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: #fff;
            animation: blink 1.5s ease infinite alternate;
        }

        @keyframes blink {
            0% {
                box-shadow: 0 0 0 0 #fff;
            }

            25% {
                box-shadow: 0 0 1px 1px #fff;
            }

            50% {
                box-shadow: 0 0 2px 2px #fff;
            }

            75% {
                box-shadow: 0 0 3px 3px #fff;
            }

            100% {
                box-shadow: 0 0 4px 4px #fff;
            }
        }
    </style>
</head>

<body>
    <div class="blink">
        <div></div>
    </div>
</body>

</html>