第9章 CSS3中的变形与动画（下）

Keyframes介绍

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

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}
复制代码

在一个“@keyframes”中的样式规则能够由多个百分比构成的，如在“0%”到“100%”之间建立更多个百分比，分别给每一个百分比中给须要有动画效果的元素加上不一样的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可使用关键词from和to来表明，其中0%对应的是from，100%对应的是to。

浏览器的支持状况：

Chrome 和 Safari 须要前缀 -webkit-；Foxfire 须要前缀 -moz-。 案例演示 经过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，而后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。 HTML:

<div>鼠标放到我身上</div>

CSS:
@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{
  animation: wobble 5s ease .1s;
}
复制代码

调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。须要特别注意: animation-name 调用的动画名须要和“@keyframes”定义的动画名称彻底一致（区分大小写），若是不一致将不具备任何动画效果。 语法：

animation-name: none | IDENT[,none|DENT]*;
复制代码

一、IDENT是由 @keyframes 建立的动画名，上面已经讲过了（animation-name 调用的动画名须要和“@keyframes”定义的动画名称彻底一致）； 二、none为默认值，当值为 none 时，将没有任何动画效果,这能够用于覆盖任何动画。 注意：须要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

@keyframes around{
  0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(180px);
  }
  50%{
     transform: translate(180px, 180px); 
  }
  75%{
    transform:translate(0,180px);
  }
  100%{
    transform: translateY(0);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
  animation-name:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
}
复制代码

设置动画播放时间

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

animation-duration: <time>[,<time>]*
复制代码

取值为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（若是值为负值会被视为“0”）。

设置动画播放方式

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推动来改变属性值的变换速率，简单点说就是动画的播放方式。 语法规则： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]* 它和transition中的transition-timing-function同样，具备如下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。对应功以下：

在调用move动画播放中，让元素样式从初始状态到终止状态时，先加速再减速，也就是渐显渐隐效果。

设置动画开始播放的时间

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性同样，用于定义在浏览器开始执行动画以前等待的时间。

设置动画播放次数

animation-iteration-count属性主要用来定义动画的播放次数。 语法规则： animation-iteration-count: infinite | [, infinite | ]* 一、其值一般为整数，但也可使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 二、若是取值为infinite，动画将会无限次的播放。 举例： 经过animation-iteration-count属性让动画move只播放5次，代码设置为： animation-iteration-count:5; 注意：Chrome或Safari浏览器，须要加入-webkit-前缀！

设置动画播放方向

animation-direction属性主要用来设置动画播放方向，其语法规则以下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 一、normal是默认值，若是设置为normal时，动画的每次循环都是向前播放； 二、另外一个值是alternate，他的做用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态。 参数： 其主要有两个值：running和paused。 其中running是其默认值，主要做用就是相似于音乐播放器同样，能够经过paused将正在播放的动画停下来，也能够经过running将暂停的动画从新播放，这里的从新播放不必定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外若是暂停了动画的播放，元素的样式将回到最原始设置状态。

@keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:paused;
}
div:hover span {
  animation-play-state:running;
}
复制代码

设置动画时间外属性

animation-fill-mode属性定义在动画开始以前和结束以后发生的操做。主要具备四个属性值：none、forwards、backwords和both。其四个属性值对应效果以下：

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具备forwards和backwards效果

在默认状况之下，动画不会影响它的关键帧以外的属性，使用animation-fill-mode属性能够修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具备这两个效果。 例如：让动画停在最一帧处。代码以下： animation-fill-mode:forwards;

好吧，CSS3 3D transform变换，不过如此，更多细节参考连接： www.zhangxinxu.com/wordpress/2…