CSS3-动画（transition和animation）

transition（属性动画）

允许css的属性值在一定的时间区间内平滑地过渡，只有两个开始和结束两个状态

语法如下：

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

• transition-property
  用来指定执行transition效果的属性，可以为 none,all或者特定的属性。
• transition-duration
  动画执行的持续时间，单位为s（秒）或者 ms（毫秒）。
• transition-timing-function
  变换速率效果，可选值为ease（逐渐变慢）|linear（匀速)|ease-in（加速）|ease-out（减速）|ease-in-out（先加速再减速）|cubic-bezier（自定义时间曲线）。
• transition-delay
  用来指定动画开始执行的时间，取值同transition-duration，但是可以为负数。

举例：

/*开始样式，transition写在开始样式内*/
#fade {
  font-size: 14px;
  transition: font-size .5s .3s;
}
/*结束样式 */
#fade:hover {
  font-size: 36px;
}

 

animation（关键帧动画）

CSS3 中的 animation 是通过一个叫Keyframes 关键帧来控制，可以设置多个关键帧。

关键帧的命名是 由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写 法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，语法如下：

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

/*或者全部写成百分比的形式*/
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

 

 

animation属性主要有以下几种：animation- name;animation-duration;animation-timing-function;animation- delay;animation-iteration-count;animation-direction;animation-play- state。

• animation-name 关键帧名
  用来定义一个动画的名称，也就是由前面的keyframes创建的动画名，默认值为none，当值为none时，将没有任何动画效果。如果我们要同时附几个animation给一个元素，只要用逗号,隔开即可。
• animation-iteration-count 动画循环次数
  默认为1，如果要进行无限循环，只要设为infinite即可。
• animation-direction 动画播放的方向
  其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
• animation-play-state 播放状态
  其主要有两个值，running和paused，其中running为默认值。可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放。这个属性不常用。

 

举例：

@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;
}