再探cubic-bezier

今天又用到了cubic-bezier
于是研究了下4个参数的意思

cubic-bezier是一个来回动画
前面两个参数是开始动画的参数,后面两个是结束的参数

来回动画分开处理,都是从0开始1结束 0 -------- 1

div:hover
{
width:300px;
}
#div {
transition-timing-function: cubic-bezier(0.01,1,0.99,1);
}

当鼠标经过时
开始动画一共分成3断 0 到 0.01, 0.01到1
前面 第一段距离会慢速,第二段会快速

你可能感兴趣的:(再探cubic-bezier)