【跟着官方文档学习css 】animation-timing-function

最新推荐文章于 2024-03-18 21:52:36 发布
最新推荐文章于 2024-03-18 21:52:36 发布
阅读量1k 收藏 5
点赞数
分类专栏： css 文章标签： css 学习 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17335549/article/details/116763524
版权
本文详细介绍了CSS动画中的时间函数，包括ease、ease-in、ease-out、linear等常见类型，以及如何使用cubic-bezier自定义动画速度曲线。重点解析了step-start、step-end和贝塞尔曲线的工作原理，强调了它们在定义动画节奏中的关键作用。此外，还探讨了如何通过调整参数来实现不同的动画效果。
摘要由CSDN通过智能技术生成

每日鸡汤，每个你想要学习的念头都是未来的你向自己求救

之前css 的系统学习说了， css 的animation 有很多值，

animation-name. animation-duration; animation-timing-function 等等

看来时间函数是知识点最多的，值得系统的学习一下

这个时间函数，虽然可以写在animation 后面；但是这也是一个单独的css属性可以单独写的，同理还是transiton-timing-function

a {

    animation-timing-function: ease/ease-in/ ease-out/linear/cubic-bezier
}

时间函数就是定义css 动画的执行的节奏，也就是快慢

  1. ease 和ease-in-out类似但是不相同这是很重要, 【开始和结束都慢，中间快，也就是使变化的边界很柔和】，也是animation-timing-function 或者transition-timing-function 的初始值/默认动画
    1. ease cubic-bezier(0.25, 0.1, 0.25 ,0.1)这个加速更快
    2. ease-in-out. cubic-bezier(0.42, 0, 0.58, 1) 缓慢加速，开始是和ease-in 一样，结束和ease-out一样
  2. ease-in. 低速开始了， 开始慢慢的， 结束快 in 进入， 名字里面有的慢, 因为ease是缓解的意思cubic-bezier(0.42, 0, 1, 1)
  3. ease-out 低速结束，开始快，结束慢cubic-bezier(0, 0, 0.58, 1)
  4. linear cubic-bezier(0, 0, 1, 1) 也很有用 动画从头到尾的速度都是相同的,，当变化很下的时候，比如几像素的更改或者颜色的变化
    1. 上面这几个都是特殊的贝塞尔曲线
  5. step-start 动画steps(1, start)执行一步，动画执行时以左侧端点为开始？？？
  6. step-end 动画step(1, end)动画分成一步，动画执行时，右侧结尾端点为开始，？？？
    1. step-start 和step-end都是 step(5, start)函数的特殊形式
    2. start = jump-start
    3. step(4, end) =step(4, jump-end)
    4. 首先要注意timing-funtion作用于每个关键帧之间，而不是整个动画，就是@keyframes中设置的两个关键帧之间
    5. step(n[大于0], <direction(方向)>) 第一个参数就是表明每个关键帧之间变化的次数，n 把关键帧的间隔等分
    6. 第二个参数可选，默认是end, 可以取值为start和end, 用来指定每个间隔的起点或是终点发生变化
    7. start 是两个关键帧的前者，end是两个关键帧的后者
    8. start 跳过0%， end跳过100%
    9. 左连续和右连续用函数的角度看，其实很好理解，关键帧的左边是否有线条？左连续，同理；
    10. start 左连续 用下一帧的现实效果填充间隔, includes pauses at both the 0% and 100% marks, 
    11. end 右连续 以上一帧的效果填充动画
    12. jump-none There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration
    13. step-start 就是立刻就跳转到当前关键帧结束的状态
    14. step-end  就是保持当前关键帧开始的状态，然后突然结束、
    15. jump-both 左右连续，0% 100% 会停止
  7. 贝塞尔曲线，好家伙这个很重要，又称三次贝塞尔 ，是生成animation 速度曲线的函数，四个参数， cubuc-bezier(x1, y1, x2,y2)
    1. 这个贝塞尔的坐标我好不容易会看了
    2. 看官方文档
    3. 这个曲线上就只有四个点，而且y1 就是和坐标（0，0）连接的点
    4. y2就是和坐标和（1，1）连接的点
    5. 而且宽度就是1，因为x的取值就是0-1, 竖着的就是y坐标，可以取负值
    6. y坐标两个点一定在这个曲线的两边么？肯定不是啊
    7. 在这个官方网站自己玩
    8. 好了， 这回基本上能看懂了了，
    9. 一般参数0.33 前面的0 可以省略直接写.33

我有一棵树
关注
专栏目录
CSS3 animation-timing-function 属性
shengyin714959的博客
09-06 177
animation-timing-function指定动画将如何完成一个周期。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。默认值:ease继承:no版本:CSS3object。
广州蓝景技术分享—animation-timing-function的自定义动画速度曲线
qq 2903359018博客
10-31 1730
1.需求背景 随着前端的发展，我们在做项目的时候除了追求炫酷的特效外，更加追求用户的体验和资源的利用率，我们之前在项目里面做动图时都是引入Flash动画，但是Flash动画通常都是非常大的文件，所以为了资源优化，我们需要用到animation-timing-function的steps属性，将动画变为GPU渲染出来。 2.animation-timing-function的简介 animatio...
Animation属性 animation-timing-function
u010289111的专栏
06-10 1098
然后又遇到了类似这样的 animation : 3s ease-in-out 0s normal none infinite superman; 虽然经常看到类似  ease-in-out这样的定义，但是，用到的比较有限也没有深入理解，但是专门做动效的还是需要理解。 可以参照着个描述来取所需的值 he animation-timing-function property c
CSS3动画中神奇的animation-timing-function
aohuiqiao5036的博客
02-23 1064
CSS3动画（animation）属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time（ms、s） 指定动画时长 animation-timing-function linear、ease（默认）、ease-in、ease-...
Animation-timing-function属性
the_first_player的博客
04-10 543
Animation-timing-function属性 Animation-timing-function属性： 1、对象动画得过渡类型 2、语法; （1）ease 平滑过渡 等同于贝塞尔曲线（0.25，0.1，0.25 ，1.0)–开头和结尾比较平滑，但最后相对较快。 （2）linear 线性过渡 --突然开始，中间匀速，再次突然停止。 （3）ease-in 由慢到快 （4）ease-out 由...
css中Animation-timing-function速度曲线细节
m0_51495354的博客
11-29 343
css中Animation-timing-function速度曲线细节
css animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
05-15
这段代码是用来设置 CSS 动画的时间函数（timing function）的。其中 `cubic-bezier` 是一种贝塞尔曲线的函数，它可以通过四个参数来定义一个时间函数，分别是 `x1`、`y1`、`x2` 和 `y2`。这四个参数的取值范围是 0 ...
animation-name B、animation-duration C、animation-timing-function D、animation-delay
06-08
这里列出了四个CSS属性：animation-name、animation-duration、animation-timing-function和animation-delay。它们是用来控制CSS动画的。 - animation-name用于指定一个动画效果的名称。 - animation-duration用于...
animation-timing-function的steps函数
06-13
`animation-timing-function`是CSS动画属性，用于定义动画中每个阶段的时间函数。`steps`函数是其中一种时间函数，它将动画分成一系列步骤，每个步骤的持续时间相等。它的语法如下： ```css animation-timing-...
css中animation属性animation-timing-function知识点以及属性值steps()详解
热门推荐
小白的博客
07-26 1万+
在animation中最重要的其实就是时间函数（animation-timing-function）这个属性，他决定了你的动画将以什么样的速度执行，所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear、ease、ease-out等都是基于这个属性值的，那么我们接下来就看看这个东西到底是什么含义。 这个时间函数是通过一个坐标反映出来的： 这个就是tim...
CSS3动画 ☞ animation-time-function ☞ step属性
风起叶落，若是不知，岂会心动！
06-15 1222
CSS3动画 ☞ animation-time-function ☞ step属性动画属性 animation-name: 给动画起的名字，在定义动画帧@keyframes时用 animation-duration：动画执行时间 animation-timing-function：动画帧执行函数，可以指定两个帧之间的过渡方式 linear|ease|ease-in|ease-out|ease-in
css3中animation属性animation-timing-function知识点以及其属性值steps()
weixin_34335458的博客
05-03 683
在animation中最重要的其实就是时间函数（animation-timing-function）这个属性，他决定了你的动画将以什么样的速度执行，所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear、ease、ease-out等都是基于这个属性值的，那么我们接下来就看看这个东西到底是什么含义。 这个时间函数是通过一个坐标反映出来的： 这个就是t...
animate.css使用文档
6块腹肌的博客
08-05 8714
step1：下载/引入 链接：https://daneden.github.io/animate.css/ 或者使用npm： npm install animate.css --save 或者使用yarn： yarn add animate.css CDN： <link rel="stylesheet" href="https://cd...
css3动画基础详解（@keyframes和animation）
漫天随飞雪的博客
09-18 1490
动画是使元素从一种样式逐渐变化为另外一种效果，CSS3动画的生成，主要依赖@keyframes定义动画，animation执行动画。
前端 HTML/CSS （十五）
木木木森林
01-07 1072
前端 HTML/CSS （十五） 过渡的时候不要用 auto 这个值。 display: none之后马上使用过渡是不好使的，因为会被当做没有开始状态，直接就到了结束状态。 边框折叠只存在于块状元素中，当边框折叠时也可以把元素转换为行内块元素来解决。 动画 过渡是在状态发生变化时把一个属性的值从一个规则设定的值改变为另外一个规则中设定的值。这个变化是在一段时间完成的不是瞬间变化的。 过渡需要触发（如hover上去后）才能变化，而动画不需要。 CSS动画和过渡的相同点就是都在一段时间内发生变化，不同
【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-10 4932
一、动画速度曲线设置 二、代码示例 - 动画速度曲线设置 1、代码示例 - 动画匀速执行 2、代码示例 - 动画分 2 步执行 三、代码示例 - 使用动画步长实现打字机效果
css3-过渡及动画属性 (前端必学三）
最新发布
xuemen11的博客
03-18 878
CSS3的过渡属性可以定义元素在不同状态之间的过渡效果，使得页面呈现出更流畅、更生动的动画效果。可能的值包括“normal”（正常播放）、“reverse”（反向播放）、“alternate”（动画应该轮流反向播放）和“alternate-reverse”（动画应该首先反向播放，然后轮流反向播放）常见的值有“ease”、“linear”、“ease-in”、“ease-out”和“ease-in-out”等，也可以自定义贝塞尔曲线。用于指定参与过渡的属性，可以是具体的属性名，也可以是。
animation-timing-function如何控制动态特效的速度缓慢？
yrldjsbk的博客
01-26 493
第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
前端2-6-11：animate-timing-function属性、cubic-bezier() 函数、贝塞尔曲线的快慢
Yummy的博客
06-11 1296
【问题】下面使用Animate-timing-function定义的贝塞尔曲线，哪一个是先快后慢的（） 正确答案: A 你的答案: B(错误) animation-timing-function : cubic-bezier(.22,1.23,.97,.89) animation-timing-function : cubic-bezier(1.23,..22,97,.89) animation-timing-function : cubic-bezier(1.23,.97,.89,.2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值