Fatal编程技术网
  • html/
  • Html 过渡加速

Html 过渡加速

html css

Html 过渡加速,html,css,Html,Css,如何改变CSS转换加速和减速的速度 例如，如果我运行以下代码： <style> div { width: 100px; height: 100px; background: red; transition-duration: 4s; } div:hover { width: 200px; background: blue; } </style> </head> <body> <div>

如何改变CSS转换加速和减速的速度

例如，如果我运行以下代码：

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    transition-duration: 4s;
}

div:hover {
    width: 200px;
    background: blue;
}
</style>
</head>
<body>

<div></div>


div{
宽度：100px；
高度：100px；
背景：红色；
过渡时间：4s；
}
div:悬停{
宽度：200px；
背景：蓝色；
}
它以特定的速度加速，并以特定的速度开始减速

如何更改其加速和减速的速度（不是实际过渡时间，只是加速和减速）

CSS3过渡计时功能属性

“过渡正时”功能属性指定车辆的速度曲线 过渡效应

此属性允许过渡效果在其上改变速度 持续时间

语法

转换计时功能：ease | linear | ease in | ease out | ease in out | cubic-bezier（）| initial | inherit


在CSS中设置
转换计时功能
：


transition-timing-function: ease-in-out;



可能的值：ease | linear | ease in | ease out | ease in out | cubic-bezier（）| initial | inherit
为此，您需要使用
转换计时功能

从


转换计时功能
属性描述如何计算转换期间使用的中间值。它允许在过渡期间改变速度。这些效应通常被称为缓和函数

现在，您需要创建减速过渡。为此，您需要查看减速的位置-时间图，并创建一个与之类似的
cubic-bezier（）
函数



更改
立方贝塞尔
函数的值以满足您的需要

代码片段：



div{
宽度：100px；
高度：100px；
背景：红色；
过渡时间：1s；
过渡计时功能：三次贝塞尔（0.2,0.5,0.3,1）；
}
div:悬停{
宽度：200px；
背景：蓝色；
}


很抱歉再次出现，但是否可以a）找到/定义一个用于缓和的经验增长函数，或b）将此立方贝塞尔函数反转为1/x？基本上是得到相反的加速度