阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS 动画

      CSS 动画定义和用法

      一些 CSS 属性是_可以有动画效果的_,这意味着它们可以用于动画和过渡。

      动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。


      浏览器支持

      表格中的数字表示支持该方法的第一个浏览器的版本号。

      紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

      ChromeIEFFsafariopen
      4.0 -webkit-10.016.0
      5.0 -moz-
      4.0 -webkit-15.0 -webkit-

      背景颜色逐渐地从红色变化到蓝色

      @keyframes mymove {
          from {background-color:red;}
          to {background-color:blue;}
      }
      
      /*Safari 和 Chrome:*/
      @-webkit-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等待添加效果
      opacity等待添加效果

      draft: true 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 | 等待添加效果

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录