css3 常用整理 ----（3）-优快云博客

本文介绍如何使用CSS动画实现基本的动画效果。通过定义关键帧及属性，可以轻松制作平滑过渡的动画。文章还介绍了animation属性的各个参数及其作用。

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

animation 动画

先写一个关键帧，动画按这个关键帧运动

@keyframes move{            
    0% {                
        left: 0px;            
    }            
    100% {                
        left: 100px;            
    }        
}复制代码

div{            
    position: absolute;            
    left: 20px;            
    top: 0;            
    height: 100px;            
    width: 100px;            
    background: rgb(0, 141, 255);            
    animation: move 1s linear;        
}复制代码

然后在div上绑定这个关键帧，animation和transition很像，有那么几个参数值

animation-name:

animation-duration:

animation-timing-funciton:

animation-delay:

animation-direction: normal/reverse/alternate/alternate-reverse

alernate奇数次正向，偶数次反向；alternate-reverse相反

animation-iteration-count: infinite/number

动画执行次数

animation-fill-mode: forwards/backwords/both/none

forwards元素停留在动画的最终帧；backwards忽略原位置，直接定位到动画的初始帧；both即二者结合

animation-play-state: running/paused

oDiv.onclick = function () {            
    this.style.animationPlayState = 'running';        
}
可以设置按钮进行控制动画的播放复制代码

当动画进行完毕后，div会回到最初的位置（left: 20px）

当keyfreams是从0%到100%时，可以直接写from - to，即

@keyframes move{            
    from {                
        left: 0px;            
    }            
    to {                
        left: 100px;            
    }        
}复制代码