css3 transition的各种ease效果
CSS3的transition-timing-function属性用来指定过渡效果的速度曲线，也就是动画变化的速度。最常用的值包括ease, ease-in, ease-out, ease-in-out, linear以及cubic-bezier。
- ease：默认值，动画以较慢的速度开始和结束。
- ease-in：动画以较慢的速度开始。
- ease-out：动画以较慢的速度结束。
- ease-in-out：动画以较慢的速度开始和结束。
- linear：动画速度以常数速度进行。
- cubic-bezier：允许您定义自己的速度曲线。
例如，如果你想要一个元素的宽度在hover时发生变化，并且希望这个变化过程是“缓进缓出”的，你可以这样写CSS：
div {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s ease-in-out;
}
div:hover {
width: 200px;
}这段代码定义了一个div元素，在hover时，它的宽度会在1秒内从100px变到200px，并且变化的速度会先加快后减慢。
评论已关闭