CSS动画【animation】

最新推荐文章于 2025-04-17 11:42:57 发布

_Vrtual .

最新推荐文章于 2025-04-17 11:42:57 发布

阅读量3.1w

点赞数 4

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_61466362/article/details/124366598

版权

本文详细介绍了CSS3动画的基础使用，包括定义动画的关键帧、语法，以及动画序列的应用。还探讨了常见动画属性如持续时间、速度曲线、延迟等，并提供了简写方式和示例代码。适合理解CSS动画原理和技术开发者学习。

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

一、动画(animation)

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

1、动画的基本使用

先定义动画
在调用定义好的动画

2、语法

   @keyframes 动画名称 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }

调用动画

   div {
   	/* 调用动画 */
       animation-name: 动画名称;
    	/* 持续时间 */
    	animation-duration: 持续时间；
   }

二、动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

应用：

  @keyframes move {
            /* from{
                transform: translate(0,0);
            }
            to {
                transform: translate(1000px,0);
            } */
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(1000px,0);
            }
            50% {
                transform: translate(1000px,500px);
            }
            75% {
                transform: translate(0,500px);
            }
            100% {
                transform: translate(0,0);
            }
        }

三、动画常见属性

代码应用

 div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 4s;
            /* 动画速度曲线 */
            animation-timing-function: ease;
            /* 动画开始时间 */
            animation-delay: 1s;
            /* 动画播放次数 */
            /* animation-iteration-count: 2; */
            /* 动画播放方向 */
            /* animation-direction: alternate; */
            /* 动画结束后状态 */
            animation-fill-mode: forwards;
        }
        div:hover {
            animation-play-state: paused;
        }

四、动画简写方式

/* animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

注：

简写里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
要想动画走回来，而不是直接调回来：animation-direction: alternate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards