再探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
前面 第一段距离会慢速,第二段会快速

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,107评论 22 225
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,803评论 0 2
  • 2018年还有5个月就结束了 27岁, 恐慌了, 凌乱了....... 27岁这一年, 还是面临着对工作的抉择, ...
    Ali李阅读 178评论 0 0
  • 三天上课回来,整理心态,重新开P,发现对着孩子比较容易接纳,对着大人就比较困难。 白天讨论第三法,突然很有收获,一...
    木樨木阅读 256评论 0 3
  • 花园中,陆无为坐在一大石上,微微的闭上眼睛,此时阳光已经洒向大地,清风依旧眷恋此处,他的发丝随风飞舞,可他却不想着...
    柳树下有对睡莲阅读 412评论 3 1