css animation 总结

animation属性

CSS animation 属性是

• animation-name，应用的@keyframes名称
• animation-duration,
• animation-timing-function，
• animation-delay，动画开始的延时时间
• animation-iteration-count，执行次数，可以是infinite
• animation-direction，方向
• animation-fill-mode，可选forwards定格在最终，backwards最初
• animation-play-state，可以暂停

属性的一个简写属性形式。

keyframes

MDN相关介绍
基本语法示例

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

• from 是可以省略的，省略则最初效果是默认的
• from 可以使用0%替代
• 动画帧可以在任意时刻调整，可以是0%，30%，60%，61%
• 关键帧被重复定义时，后定义将覆盖前定义
• 属性中的!important将被忽略

那些属性是可动画的

一些CSS属性可以是动画的，也就是说，当它的值改变时，或者当 CSS动画或 CSS转换使用时，它可以以平滑的方式改变。MDN可动画列表

而一些如background-image这种没有过渡效果的是无法使用动画的