div {
background: #000;
transition: background 1s;
}
div:hover {
background: red;
}
/*
transition-property
需要添加过渡效果的属性名 all:所有属性
transition-duration
过渡的总时长
transition-timing-function
过渡的时间曲线
ease 慢 匀速 缓慢结束
linear 匀速
ease-in 慢慢进入 匀速
ease-out 匀速 慢慢出去
ease-in-out 慢慢进入 匀速 慢慢出去
自定义曲线公式 cubic-bezier(0,.65,1,.46)
transition-delay
过渡的延迟时间
正直等待对应的时间在执行动画
负值则是跳过对应的时间开始动画
*/
时间曲线:百度、贝塞尔曲线可视化
网友评论