HTML-动画实现Animation_html animation-优快云博客

本文介绍了HTML CSS中的动画Animation，包括@keyframes定义动画序列，animation-name指定动画名称，animation-duration设置动画时长，animation-timing-function设定动画速度曲线，以及animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state等属性的用法。通过实例展示了如何创建一个方块向左循环移动的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在没有接触js之前，大家使用HTML和CSS做出来的页面都是静态页面，久而久之，静态页面显得非常的无趣，已经无法满足大家的需求了，就会开始有很多新鲜的idea，比如我想让hover鼠标悬停事件变得更有趣，我想让图片动起来，我想做一个会动的页面，那么不使用js可不可以做呢？答案是必须的~
那么今天为大家带来的是动画animationn，可以满足大家一些简单的动态要求。

简单介绍

Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作。
下面先介绍玩animation的属性之后，再给大家带来一个案例，更清晰的了解animation的用法。

属性：

@keyframes
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
anmiation-fill-mode
animation-play-state
animation连写

@keyframes

首先我们需要先设置动画序列**@keyframes**，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

 /* 第一种方式：0% -> 100% */
        @keyframes animiationName {
            0% {
                css-style
            }

            50% {
                css-style
            }

            100% {
                css-style
            }
        }

这里不一定只能是我写的0% 50% 100%而已，亦可以10% 25% 75%等

  /* 第二种方式：from -> to */
        @keyframes animiationName {
            from {
                css-style;
            }

            to {
                css-style;
            }
        }

而是用from to方式，就是固定from to两个变化了，相当于从0到100的变化。如果需要细微变化的话使用第一种方式，不然的话第二种也够用了。

animation-name

指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画。告诉系统我们需要自己创建一个名称叫做animiationName的动画，也即是我们刚才@keyframes创建的animationName。

 /* 第二步：animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画 */
            animation-name: animationName;

animation-duration

动画指定需要多少秒或毫秒完成，告诉系统动画持续的时间
time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

  /* -animation-duration	动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长 */
            /* 持续动画时间 */
            animation-duration: 1s;
             animation-duration: 5s;

animation-timing-function

设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

 /* -animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度 */
            animation-timing-function: linear;
            animation-timing-function: ease;
            animation-timing-function: ease-in;
            animation-timing-function: