动画 animation 关键帧 的总结（上）

动画 animation 关键帧 的总结（上）：

animation动画提供几个属性如下： 

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

 

01 keyframes（关键帧）

计算机动画术语，帧-就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴帧表现为一格或一个标记。

关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

 

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

 

在一个“@keyframes”中的样式规则可以由多个百分比构成的，

如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，

从而达到一种在不断变化的效果。

设置基础样式如下：

div {
	width: 200px;
	height: 200px;
    border-radius: 100%;
	margin: 100px auto;
	background: #0F3;
}
div:hover{
	animation:changecolor 3s ease-in 0.3s 2;
}

通过不同的百分比切换不同的颜色如下：

@keyframes changecolor{
	0%{
		background:green;
	}
	20%{
		background:pink;
	}
	40%{
		background:red;
	}
	60%{
		background:#000;
	}
	100%{
		background:orange;
	}
}

效果呈现：

02调用动画

animation-name属性:主要是用来调用 @keyframes 定义好的动画。

需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），

如果不一致将不具有任何动画效果。

属性值：

none:默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

“@keyframes”定义的动画名称。

03 ----animation-duration设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

 

设置基础样式如下：

div {
  width: 200px;
  height: 200px;
  background: #000;
  margin: 100px auto;
  animation-name:h1;/*规定需要绑定到选择器的 keyframe 名称。。*/
  animation-duration:2s;/*规定完成动画所花费的时间，以秒或毫秒计。*/
  animation-timing-function:linear;/*规定动画的速度曲线。*/
  animation-delay:.5s;/*规定在动画开始之前的延迟。*/
  animation-iteration-count:infinite;/*规定动画应该播放的次数。*/
}

通过不同的百分比切换不同的边框圆角如下：

@keyframes h1{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 50%;
  }
}

效果呈现：