CSS效果

补间动画

1 位置-平移（left/right/margin/transform）
2 方位-旋转（transform）
3 大小-缩放（transform）
4 透明度（opacity）
5 其他-线性变换（transform）

transition

.container {
  width:100px;
  height: 100px;
  background:red;
  transition:all 1s;
}
.container:hover {
    width:800px;
    background:green;
}

关键字帧

1 相当于多个补间动画
2 与元素无关

.container {
   width:100px;
   height: 100px;
   background: red;
   animation:run 1s;
   animation-direction:reverse;
   animation-iteration-count:infinite ;//循环的次数，可以是无限循环infinite，也可以是具体的数字
   animation-play-state:paused://播放状态
   animation-fill-mode:forwards;//动画填充模式
   
   
   
}

@keyframes run {
   0% {
     width:100px
  }
  100% {
     width:800px;
  }
}

注意：如果只有这两个的话就可以写0%可以写from
100% 可以写 to

如果有其他的，就要写百分百

<div class="container" </div  

逐帧动画

1 适用于无法补间计算的动画
2 资源较大
3 使用steps()
.container {
  width:100px;
  height:100px;
  border:1px  solid  red;
  background:url(./animal.png) no-repeat;
  animation:run 1s infinite
  animation-timing-function:steps(2);
}
@keyframes  run {
  0% {
      background-position:0 0 ;
  }
  12.5% {
    background-position:-100px 0;
}
...

}

CSS动画的实现方式有几种？（面试题）

1 transition
2 keyframes(animation)

过度动画和关键帧动画的区别？

1 过渡动画需要有状态变化
2 关键帧动画不需要状态变化
3 关键帧动画能控制更精细

如何实现逐帧动画

1 使用关键帧动画
2 去掉补间（steps）

CSS 动画的性能

1 行能不坏
2 部分情况下由于JS
3 但JS可以做到更好
４　部分高危属性　box-shadow等

CSS动画与JS动画的区别

1css动画
1浏览器可以对动画进行优化
2代码冗长，想用CSS实现稍微复杂一点的动画，最后CSS代码会变的非常笨重

2JS代码
1 CSS3有兼容性问题，而JS大多数没有兼容性问题
2 代码的复杂度高于CSS动画