76、两种方式实现CSS动画

实现CSS动画有两种主要的方法：过渡动画(transition)和animation动画。

1、过渡动画（transition）

  可以让CSS的一些变化变得平滑。

 

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；

（1）例：

transition的属性可以分开写，也可以放在一起写,比如下面的代码，图片的宽高本来都是15px，想要让它1秒的时间内过渡到高为450px，通过：hover来触发，那么代码就可以如下：

img{
    height:15px;
    width:15px;
    transition: height 1s ease 1s;/*合在一起*/
}
或者：
img{
    height：15px;
    width: 15px;
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;/*属性分开写*/
}
img:hover{
    height: 450px;
}

（2）属性详解： 

1）transition-property

不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果。完整列表，见这个列表 ，具体效果，见 这个页面。

2）transition-duration

指定从一个属性到另一个属性过渡所要花费的时间。默认值为0，为0时，表示变化是瞬时的，看不到过渡效果。

3）transiton-timing-function

过渡函数，有如下几种：

liner ：匀速 
ease-in：减速 
ease-out：加速 
ease-in-out：先加速再减速 
cubic-bezier：三次贝塞尔曲线

2、animation

animation属性通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成： 

• 用关键帧@keyframes声明一个动画； 
• 在animation属性中调用关键帧声明的动画。

Note：

• animation属性到目前位置得到了大多数浏览器的支持，但是，需要添加浏览器前缀哦！需要添加浏览器前缀哦！需要添加浏览器前缀哦！
• 一个@keyframes中的样式规则是由多个百分比构成的，@keyframes必须要加webkit前缀。

（1）例：

/*第一种：加前缀*/
div:hover {
  -webkit-animation: 1s changeColor;
}

@-webkit-keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

/*第二种：不加前缀*/
div:hover {
  /*动画播放的时间1s，关键帧的名字changeColor*/
  animation: 1s changeColor;  /*1s内实现0%到100%的过渡*/
}

@keyframes changeColor { /*关键帧*/
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

（2）属性详解：

3、区别

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于

• transition需要触发一个事件才会随着时间改变其CSS属性。在鼠标hover时的动画效果大多使用过渡动画；
• animation在不需要触发任何事件的情况下，也可以随时间变化来改变元素CSS属性，达到一种动画的效果。在网页加载后立即执行不需要手动触发时大多使用animation动画。