CSS3新添加了过渡动画， 即使用者定义好 一个元素的开始状态和结束状态， CSS会根据变化曲线形成补间动画效果。

CSS3中用transition属性来描述动画如何运动。

transition

定义

// width 表示什么属性需要用到过渡动画， 这里的例子是 宽度// 1s 表示动画时长// linear 表示的是一种变化曲线// 0s 表示延迟时间， 代表动画被延迟几秒后执行transition: width 1s linear 0s

下面我们重点了解下， 哪个属性需要过渡 ， 还有 变化曲线是什么

下面我们重点聊聊两点:

  1. 哪个属性需要过渡?
  2. 变化曲线.

CSS中哪些属性可以被过渡

  • 所有数值类型的都可以过渡， 例如: height, width, border-radius 等。
  • 背景颜色和文字。
  • 所有的变形（上两篇讲的2D和3D变形）。
  • 如果需要全部属性有动画效果， 则第一个参数 写 all。

示例

正方形变圆形（border-radius 属性过渡）。

              直角变圆角          .box {        width: 200px;        height: 200px;        background-color: red;        border-radius: 0;        margin: auto;      }      .box:hover {        border-radius: 50%;        transition: border-radius 1s linear 0s;      }

缓动曲线

缓动曲线也叫缓动参数，就是一种指定速率的变化曲线。

网址：https://cubic-bezier.com/

自定义曲线

通过 https://cubic-bezier.com/ 生成曲线函数（设置方向和速率），并点击拷贝函数。

将曲线函数拷贝到代码中， 本次示例 描述一个方块按照我们定义的运动曲线从左到右做直线运动。

                  贝塞尔曲线          * {        margin: 0;        padding: 0;      }      .box {        border: 1px solid #000;      }      .sonBox {        margin-top: 5px;        width: 50px;        height: 50px;        background-color: orange;        margin-bottom: 10px;        position: relative;        left: 0;      }      .box:hover .sonBox {        left: 1000px;        transition: left 5s cubic-bezier(0.27, 0.96, 0.82, 0.13) 0s;      }

总结

过渡动画用transition属性。

过渡属性决定了哪些属性参与过渡动画。

动画时长决定了动画播放时间。

缓动曲线决定了运动的速率。

延迟动画决定了动画被延迟几秒后播放。

.zstitle { width: 280px; text-align: center; font-size: 26px } .zsimgweixin { width: 280px } .zsimgali { width: 280px; padding: 0px 0px 50px 0px } .zsleft { float: left } .zsdiv { display: flex } .zs { font-size: 30px } .zspaddingright { padding: 0px 100px 0px 0px } 请关于一下啦^_^

微信公众号