一.Keyframes介绍:

Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

 

@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}


示例:创建一个动画名叫“changecolor”,在“0%”时背景色为red,在20%时背景色为blue,在40%背景色为orange,在60%背景色为green,在80%时背景色yellow,在100%处时背景色为red。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3动画</title>
<style>
@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>hover颜色改变</div>

</body>
</html>

二.设置动画播放方式

语法规则:
animation-timing-function:ease(由快到慢,逐渐变慢) | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*


Paste_Image.png

三.设置动画播放方向
animation-direction属性主要用来设置动画播放方向,其语法规则如下:

animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值:normal、alternate

1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;

2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

四.设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态。

参数:
其主要有两个值:running和paused。

其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。

例如,页面加载时,动画不播放。代码如下:

 

animation-play-state:paused;


五.设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下:

属性值 效果

none 默认值,表示动画将按预期进行和结束,在动画完成其最后一 帧时,动画会反转到初始帧处

forwards 表示动画在结束后继续应用最后的关键帧的位置

backwards 会在向元素应用动画样式时迅速应用动画的初始帧

both 元素动画同时具有forwards和backwards效果

在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

例如:让动画停在最一帧处。代码如下:

animation-fill-mode:forwards;


学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!