CSS 动画参考

• 

  定义和用法

  某些CSS属性是可动画的，这意味着它们可用于动画和过渡。动画属性可以从一个值逐渐变化到另一个值，如大小，数字，百分比和颜色。

• 

  浏览器支持

  表中的数字指定了第一个完全支持CSS动画的浏览器版本。后跟-webkit-， -moz-或-o-的数字指定使用前缀的第一个版本。

  Edge/IE	Chrome	FireFox	Safari	Opera
  43.0 4.0 -webkit-	10.0（含）以上	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

  将背景颜色从红色设置为蓝色：

  /* Code for old Chrome, Safari and Opera */
  @-webkit-keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
  }
  
  /* Standard syntax */
  @keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
  }

  尝试一下
• 

  可动画属性

  这些属性在CSS中是可动画的：

  属性
  background 尝试一下
  background-color 尝试一下
  background-position 尝试一下
  background-size 尝试一下
  border 尝试一下
  border-bottom 尝试一下
  border-bottom-color 尝试一下
  border-bottom-left-radius 尝试一下
  border-bottom-right-radius 尝试一下
  border-bottom-width 尝试一下
  border-color 尝试一下
  border-left 尝试一下
  border-left-color 尝试一下
  border-left-width 尝试一下
  border-right 尝试一下
  border-right-color 尝试一下
  border-right-width 尝试一下
  border-spacing 尝试一下
  border-top 尝试一下
  border-top-color 尝试一下
  border-top-left-radius 尝试一下
  border-top-right-radius 尝试一下
  border-top-width 尝试一下
  bottom 尝试一下
  box-shadow 尝试一下
  clip 尝试一下
  color 尝试一下
  column-count 尝试一下
  column-gap 尝试一下
  column-rule 尝试一下
  column-rule-color 尝试一下
  column-rule-width 尝试一下
  column-width 尝试一下
  columns 尝试一下
  filter 尝试一下
  flex 尝试一下
  flex-basis 尝试一下
  flex-grow 尝试一下
  flex-shrink 尝试一下
  font 尝试一下
  font-size 尝试一下
  font-size-adjust
  font-stretch
  font-weight 尝试一下
  height 尝试一下
  left 尝试一下
  letter-spacing 尝试一下
  line-height 尝试一下
  margin 尝试一下
  margin-bottom 尝试一下
  margin-left 尝试一下
  margin-right 尝试一下
  margin-top 尝试一下
  max-height 尝试一下
  max-width 尝试一下
  min-height 尝试一下
  min-width 尝试一下
  object-position 尝试一下
  opacity 尝试一下
  order 尝试一下
  outline 尝试一下
  outline-color 尝试一下
  outline-offset 尝试一下
  outline-width 尝试一下
  padding 尝试一下
  padding-bottom 尝试一下
  padding-left 尝试一下
  padding-right 尝试一下
  padding-top 尝试一下
  perspective 尝试一下
  perspective-origin 尝试一下
  right 尝试一下
  text-decoration-color 尝试一下
  text-indent 尝试一下
  text-shadow 尝试一下
  top 尝试一下
  transform 尝试一下
  transform-origin 尝试一下
  vertical-align 尝试一下
  visibility
  width 尝试一下
  word-spacing 尝试一下
  z-index 尝试一下