css3：animation属性

最新推荐文章于 2025-06-09 14:55:34 发布

慕慕慕白

最新推荐文章于 2025-06-09 14:55:34 发布

阅读量396

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/weixin_45326146/article/details/118965199

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了CSS动画的基础知识，包括如何使用@keyframes定义动画和通过animation属性应用动画。详细讲解了animation-direction、animation-fill-mode等简写属性，以及如何通过设置关键帧实现元素的旋转动画效果。示例代码展示了如何创建一个无限循环的旋转动画，帮助读者理解CSS动画的工作原理。

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

1 基本使用

制作动画分为两步：

定义动画 @keyframes
使用(调用)

2 @keyframes(关键帧) 定义动画

@keyframes animation{
	0%{
	...
	}
	100%{
	...
	}
}

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

3 简写属性

 /* name：动画名字  
    duration：持续时间 
    timing-function：速度曲线 
    delay：延迟  
    iteration-count：重复次数 
    direction：是否逆向播放 
    fill-mode：结束后状态
*/

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

1.direction

aniamtion-direction: norma | reverse | alternate | alternate-reverse

normal 默认的
reverse 从终点运动向起点终点=>起点
alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效
alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效

2.fill-mode

aniamtion-fill-mode:forwards | backwards

forwards 保持当前位置
backwards 回到初始位置

3.timing-function

steps 理解为动画从头到尾，需要多少步来完成。

4.iteration-count

不填默认一次
infinite 无限次

4 初步使用

div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:orangered;
            animation: move 5s linear infinite ;
        }
        @keyframes move {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(90deg);
            }
            50% {
                transform: rotate(180deg);
            }
            75% {
                transform: rotate(270deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }