使用@keyframes实现CSS动画帧效果

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS3动画 @media

@keyframes是CSS3中的一个重要特性，它用于创建动画。通过定义关键帧的样式，可以在动画过程中逐步改变元素的样式，从而实现平滑的过渡效果。使用@keyframes时，需要指定一个名称和一个或多个百分比值，百分比值表示动画在不同阶段的完成度。例如，可以创建一个名为"myAnimation"的动画，让它在0%时显示为红色，50%时显示为绿色，100%时显示为蓝色。然后，将这个动画应用到某个元素上，就可以实现该元素的动态颜色变化。

本教程教大家如何使用@keyframes，制作一个类似幻灯片的CSS动画效果。

首先我们准备一张连贯的动作图片，这里以这张熊跑路为例。

新建一个DIV容器，放这里一帧图片

<div></div>

DIV的盒子属性

div{position:absolute;width:200px;height:100px;background:url(media/bear.png)no-repeat;}

@keyframes动作

@keyframesbear{0%{background-position:00;}100%{background-position:-1600px0;}}@keyframesmove{0%{left:0;}100%{left:50%;/*margin-left:-100px;*/transform:translateX(-50%);}}

利用animation给DIV加上这个动作

div{position:absolute;width:200px;height:100px;background:url(media/bear.png)no-repeat;/*我们元素可以添加多个动画，用逗号分隔*/animation:bear.4ssteps(8)infinite,move3sforwards;}