[分享]css3动画过渡函数默认

CSS3动画过渡函数是一种属性，它可以让你的网页元素在改变状态时有更平滑的动画效果，比如渐变、旋转、缩放等。 .example{ transition: all 0.3s ease; } 在这个例子中...

CSS3动画过渡函数是一种属性，它可以让你的网页元素在改变状态时有更平滑的动画效果，比如渐变、旋转、缩放等。

 .example{
        transition: all 0.3s ease;
    } 

在这个例子中，.example是网页中某个元素的类名，它的状态改变时，所有属性都会发生0.3秒的过渡动画效果，过渡函数指定为ease。默认情况下，CSS3动画过渡函数的值为ease，这表示过渡效果是慢到快再慢。

 .example{
        transition: all 0.3s ease-in-out;
    } 

如果你希望过渡效果在开始和结束时都有一个缓慢的过渡，可以使用ease-in-out函数。在上面的例子中，再次以.all-example为例，它的所有属性会在0.3秒之内以ease-in-out过渡效果来进行过渡。

 .example{
        transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
    } 

除了默认的ease和ease-in-out之外，还可以使用cubic-bezier()函数来定义你自己的过渡函数。cubic-bezier()函数接受4个参数，它们指定了一个时间曲线，第一个和第四个参数的值必须是0和1，分别表示曲线的起点和终点。第二个和第三个参数的值定义了曲线在这个时间段内的走势。上面的例子就是使用了一个cubic-bezier函数定义了一个自定义的过渡函数。