什么是CSS动画？CSS动画属性有哪些？

么是CSS动画？

CSS动画就是通过CSS代码搭建的网页动画。允许设计师和开发人员，通过编辑网站的CSS代码添加简单的页面动画。可实现HTML元素的动画效果，从一种样式逐渐变化为另一种样式的效果。

CSS动画属性有哪些？

animation-direction属性：设置动画是否在下一周期逆向播放，默认是 "正常"。

animation-name属性：定义动画名称，用于指定由设置定义的动画的一个或多个名称。

animation-iteration-count属性：用于指定动画停止前播放动画循环的次数，即：播放次数。

animation-iteration-count属性：规定动画播放的次数，默认值是 1。

以往，想在HTML上实现动画效果，要不就用被乔布斯恨死的了Flash 动画，要不就用网页动画图像或者JavaScript 实现效果。在CSS3之后，就可以用CSS在HTML上实现动画了。

要创建 CSS3 动画，你需要了解 @keyframes 规则。现在 @keyframes 创建动画时，需将其绑定到一个选择器，否则动画不会有任何效果。

13.1 原生创建动画

用CSS3原生代码创建动画，语法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，动画的名称；

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动起来</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

输出结果

13.2 动画库创建

如果每次都要自己手动用CSS去创建动画，那效果太低了。为此，有人专门专门开发了CSS动画库animation.css。可以在线https://animate.stylek看效果，它里面的动画效果，可以满足大多数需求了。下载https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目录下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用动画库实现动画</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陈说编程，动画效果行
</main>
</body>
</html>

输出结果

好了，有关CSS动画效果的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

言

CSS3引入了强大的动画功能，使得开发者能够在不依赖JavaScript的情况下创建丰富的视觉动效。本文将深入探讨CSS3动画的核心概念、主要特性以及如何通过关键帧动画和过渡效果实现各类动画效果。

1. CSS3动画基础知识

1.1 过渡（Transition）

过渡是CSS3中最为基础的动画形式之一，它定义了一个元素在两种状态之间变化时的速度曲线和时间间隔。

/* 基本语法 */
.element {
  transition: property duration timing-function delay;
}

/* 示例 */
.button {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

在这个例子中，当.button的background-color属性发生变化时，将会在0.5秒内平滑过渡。

1.2 关键帧动画（Keyframes）

关键帧动画允许我们自定义更复杂的动画序列，包括多个中间状态。

/* 定义关键帧动画 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 应用动画 */
.element {
  animation: fadeInOut 2s infinite;
}

上述代码定义了一个名为fadeInOut的关键帧动画，该动画让元素从透明度0渐变至1再回到0，整个动画循环持续2秒，并且无限重复。

2. 动画属性与值

animation-name: 指定要使用的@keyframes规则名称。
animation-duration: 设置动画完成一个周期所花费的时间。
animation-timing-function: 控制动画速度曲线，如ease, linear, ease-in, ease-out等。
animation-delay: 动画开始前等待的时间。
animation-iteration-count: 动画播放次数，可以设置为具体数字或infinite表示无限循环。
animation-direction: 控制定向性动画是否应该在每次迭代中反向播放，默认为normal，即每次迭代按相同的顺序播放。
animation-fill-mode: 规定在动画执行之前和之后的状态，例如forwards可以让动画在结束后保持最后一个关键帧的样式。

3. 高级应用及技巧

动画同步与堆叠: 可以通过给不同的动画属性设置不同值来控制多个动画的同时运行或堆叠。
CSS动画事件监听: 利用JavaScript的transitionend和animationend事件可以捕获动画结束时触发的动作。
使用will-change属性: 提升动画性能，提前告知浏览器哪些属性即将改变并可能需要创建层以便优化渲染。

4. 实战案例

示例1 - 图片淡入淡出滚动效果

.image-slide {
  opacity: 0;
  transition: opacity 0.5s;
  will-change: opacity;
  
  /* 当图片进入可视区域时触发动画 */
  &.is-visible {
    opacity: 1;
  }
}

示例2 - 旋转动画

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

总结起来，CSS3动画功能强大且灵活，通过过渡和关键帧动画，我们可以轻松构建丰富多样的网页动态效果，提升用户体验并增强交互性。随着对CSS3动画特性的深入理解和掌握，开发者能够更加自如地运用这些技术来创作富有创意和吸引力的Web界面。

在线咨询

上一篇：报到！我是9514.8万分之一
下一篇：GitHub和码云上，7个h5页面制作工具推荐

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商