青州网站网站建设,外包公司会抽取多少工资,渝东建设工程造价信息网,承德网站建设方案在CSS中#xff0c;可以使用transition属性或者keyframes关键帧动画来创建动画效果。
使用缓动函数则可以让动画更加流畅和生动。
div {transition: property duration timing-function delay;
}div {animation: keyframes-name 可以使用transition属性或者keyframes关键帧动画来创建动画效果。
使用缓动函数则可以让动画更加流畅和生动。
div {transition: property duration timing-function delay;
}div {animation: keyframes-name duration timing-function;
}以上代码中的 timing-function 就是我们的缓动函数了
常见的缓动函数如下
1、线性缓动函数
linear (point-list)接受多个关键点作为参数多个关键点可以实现在不同时间出现不同速率速率的变化是直接转折的用法如下
linear(0, 1) // 以固定的速度变化等同于关键字linear
linear(0, 0.9, 1) // 50%的时间播放前90%的动画剩下50%的时间播放完后10%的动画
linear(0, 0.5 20%, 0.8 60%, 1) // 前20%的时间 播放前50%的动画中间40%的时间播放中间30%的动画后面40%的时间播放剩下的20%的动画关键字 linear线性 元素以固定的速度变化等价于缓动函数 linear(0, 1)。
2、三次贝塞尔缓动函数
cubic-bezier(x1, y1, x2, y2)贝塞尔曲线缓动函数接受两个点坐标参数值应在[0, 1]以及作为起点的坐标0,0终点坐标1,1 通过控制这四个点的位置可以创建更复杂的动画过渡效果。
关键字
ease慢-快-慢 这是默认的缓动函数元素会在开始和结束时较慢移动而在中间会加速等价于cubic-bezier(0.25, 0.1, 0.25, 1.0)。
ease-in慢-快 元素会开始时较慢然后逐渐加快等价于cubic-bezier(0.42, 0.0, 1.0, 1.0)。
ease-out快-慢 元素会以较快的速度开始然后逐渐减速等价于cubic-bezier(0.0, 0.0, 0.58, 1.0)。
ease-in-out慢-快-慢 动画元素会慢慢开始加速移动然后再减速结束等价于cubic-bezier(0.42, 0.0, 0.58, 1.0)。
3、阶跃缓动函数
steps (number, start | end)函数接受两个参数第一个参数表示动画分为几布第二个参数的start 表示每一布的变化时机。用法如下
// 假设动画持续4s将 P 点从 0px 移动到 40px
steps (4, end) // 将动画分成4步第1s P 点停留在0px第1s末第2s初跳跃到10px以此类推
steps (4, start) // 将动画分成4步第1s P 点停留在10px第1s末第2s初跳跃到20px以此类推关键字
step-start 等价于steps(1, start)
step-end 等价于steps(1, end)
