寒假作业16

最新推荐文章于 2021-07-21 23:56:19 发布

BAILI18

最新推荐文章于 2021-07-21 23:56:19 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/BAILI18/article/details/87270884

本文深入讲解CSS3动画的实现原理，包括如何使用@keyframes声明动画关键帧，并在animation属性中调用，实现复杂动画效果。详细介绍动画的时间、方式、延迟、播放次数等属性设置。

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

3.CSS3动画
animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
语法：

@keyframes  IDENT  {
   from {/*CSS样式写在这里*/}
   percentage {/*CSS样式写在这里*/}
   to {/*CSS样式写在这里*/}
}

//或者

@keyframes spread {
   0% {width:0;}
   33% {width:23px;}
   66% {width:46px;}
   100% {width:69px;}
 }
 
//注意 写兼容的时候浏览器前缀是放在@keyframes中间
//例如：@-webkit-keyframes、@-moz- keyframes

调用关键帧

//语法
animation:animation-name  animation–duration  animation-timing-function animation-delay  animation-iteration-count
  animation-direction  animation-play-state  animation-fill-mode;
  
// animation-name 由@keyframes创建的动画名称
// animation–duration 动画时间
// animation-timing-function 动画方式
// animation-delay 延迟时间
// animation-iteration-count 动画的播放次数     值通常为整数，默认值为1   特殊值infinite，表示动画无限次播放
// animation-direction 动画的播放方向   normal，动画每次都是循环向前播放  alternate，动画播放为偶数次则向前播放
// animation-play-state 动画的播放状态  running将暂停的动画重新播放   paused将正在播放的元素动画停下来
// animation-fill-mode 动画开始之前和结束之后发生的操作 
//														 forwards表示动画在结束后继续应用最后关键帧的位置  
//														 both表示元素动画同时具有forwards和backwards的效果
//														 backwards表示会在向元素应用动画样式时迅速应用动画的初始帧