CSS animation 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

animation用于设置动画效果。它是多个动画相关属性的组合，可以控制元素如何随时间变化其样式。

animation属性是一个简写属性，用于设置六个动画属性：

常用的实例

接下来通过多个实例演示animation属性的用法，来深化您对animation属性的理解。

实例代码运行代码

复制

.fade-in {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

CSS 语法

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

属性值

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
animation-fill-mode	规定动画在执行时间之外应用的值。
animation-play-state	规定动画是正在运行还是暂停。