当前位置：首页 > news >正文

CSS动画

news 2025/9/12 22:27:14

CSS中的动画类型

transition补间动画（有开头有结尾，浏览器自己补中间）

要求元素状态有变化，如hover

.container{width:100px;height:100px;background:red;transition:width 1s;/*transition-delay:1s 延迟一秒再动*//*tranisition: 延迟时间 哪个属性 动画时间，可以有多个; *//*transition-timing-function:   动画的时间和进度之间的关系*/
}
.container:hover{width:800px;
}

keyframe关键帧动画

指定动画的关键路径，如A -> B -> C它们之间由补间动画自动补出来。相当于多的补间动画组合在一起，但是与元素的状态无关。

.container{width: 100px;height: 100px;background: red;animation: run 1s;/*animation-direction:reverse 正向还是反向*//*animation-iteration-count: 循环次数 infinite(循环次数)*//*animation-play-state: paused 动画暂停*//*animation-fill-mode: forwards(动画完成停在最后) backwards(回到一开始的地方)*/
}
@keyframes run {0%{width: 100px;}100%{width: 800px;}
}

逐帧动画

每一帧都是关键帧，没有补间的动画。

.container{width: 100px;height: 100px;border: 1px solid red;background: url(./animal.png) no-repeat;animation: run 1s infinite;animation-timing-function: steps(1);
}
@keyframes run{0%{background-position: 0 0;}12.5%{background-position: -100px 0;}37.5%{background-position: -300px 0;}
}