简介
cubic-bezier
又称三次贝塞尔,主要是为 animation 生成速度曲线的函数, CSS3 动画速度的控制通过三次贝塞尔曲线函数实现,定义规则为: cubic-bezier (x1, y1, x2, y2)
。
cubic-bezier:http://cubic-bezier.com/
css3中常用的几个动画效果:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) // 开始和结束慢,中间快
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0) // 匀速
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) // 开始慢
ease-out: cubic-bezier(0, 0, 0.58, 1.0) // 结速慢
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0) // 与ease类似,但比ease幅度大
基本原理
贝塞尔曲线通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形,绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。
从上图我们知道的是 cubic-bezier
的取值范围:
A:默认值 (0, 0)
B:动态取值 (x1, y1)
C:动态取值 (x2, y2)
D:默认值 (1, 1)
其中 X 轴的取值范围是 [0, 1],当取值超出范围时 cubic-bezier 将失效;Y 轴的取值没有规定,当然也毋须超过 [0, 1] 过大。
我们需要关注的是 B 和 C 两点的取值,这两点就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数。
实例演示
下面用一个简单的实例来看看效果:demo演示
html 部分
<div class="normal"></div>
<div class="custom"></div>
css
.normal {
margin-bottom: 10px;
width: 50px;
height: 50px;
background-color: #ff0000;
border-radius: 50%;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.normal:hover {
-webkit-transform: translateX(150px);
-moz-transform: translateX(150px);
-o-transform: translateX(150px);
transform: translateX(150px);
}
.custom {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: blue;
-webkit-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
-moz-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
-o-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
transition: all 2s cubic-bezier(.94,-0.25,.32,1.31);
}
.custom:hover {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
transform: translateX(300px);
}
红色小球采用默认的速度曲线是 ease,蓝色小球采用自定义cubic-bezier(.94,-0.25,.32,1.31),呈现蓄力加速效果。
transition(过渡)
transition属性
transition-property
: 过渡属性(默认值为all)transition-duration
: 过渡持续时间(默认值为0s)transiton-timing-function
: 过渡函数(默认值为ease函数)transition-delay
: 过渡延迟时间(默认值为0s)
语法
transition: property duration timing-function delay;
animation(动画)
animation属性结合@ keyframes使用,animation中的animation-name需要设置成@ keyframes的name一致。例如:
<style>
.box {
height: 100px;
width: 100px;
border: 15px solid black;
animation: changebox 10s ease-in-out 3 alternate paused;
}
.box:hover {
animation-play-state: running;
}
@keyframes changebox {
10% {
background: red;
}
50% {
width: 80px;
}
70% {
border: 15px solid yellow;
}
100% {
width: 180px;
height: 180px;
}
}
</style>
<body>
<div class="box"></div>
</body>
animation属性
animation-name
: 指定要绑定到选择器的关键帧的名称animation-duration
: 动画指定需要多少秒或毫秒完成animation-timing-function
: 设置动画将如何完成一个周期animation-delay
: 设置动画在启动前的延迟间隔animation-iteration-count
: 定义动画的播放次数animation-direction
: 指定是否应该轮流反向播放动画animation-fill-mode
:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式animation-play-state
: 指定动画是否正在运行或已暂停。
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
transform(变形)
transform 分为2D 和 3D,其主要包含以下几种变换:translate位移,scale缩放,rotate旋转,skew扭曲等。
2D变形:
translate位移
transform: translate(50px, 100px);
transform: translateX(50px); // x方向移动50px
transform: translateY(100px);
scale缩放
transform: scale(2, .5);
transform: scaleX(2); // x方向增加一倍
transform: scaleY(.5); // y方向缩小一倍
rotate旋转
:rotate(正数表示顺时针旋转,负数表示逆时针旋转)
transform: rotate(30deg);
skew扭曲
transform: skew(30deg, 30deg);
transform: skewX(30deg);
transform: skewY(30deg);
3D变形:
translate位移
: translate(x, y, z);
scale缩放
: scale(x, y, z);
rotate旋转
:rotate3d(x, y, z, angle) (angle:表示3D舞台上旋转的角度)