@keyframes 规则动画
box 从红色过度到黄色,间隔 5 秒。
|
|
|
|
也可以用百分比来规定变化发生的时间,关键词 “from” 和 “to”,等同于 0% 和 100%。
例如:当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
|
|
CSS3 过度动画
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
例如:我们来修改一个 box 的宽度。
|
|
鼠标放上去后会逐渐变宽,然后移开鼠标就会逐渐恢复到之前的宽度。
CSS3 3D转换
|
|
x:用来描述元素围绕X轴旋转的矢量值; y:用来描述元素围绕Y轴旋转的矢量值; z:用来描述元素围绕Z轴旋转的矢量值; a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
|
|
|
|
围绕 X 轴旋转 45 度的样子。
|
|
试想一下,如果我们围绕 X 轴旋转 90 度应该就成了一个看不见的线了,我们旋转 89 度看看效果。
|
|
接下来我们来试试围绕 Y 轴分别旋转 45 度和 89 度的效果:
重点是 Z 轴的旋转,我们来看看效果,下面对 X, Y, Z 轴的效果对比如下:
假设我们将上面的所有 1 改为 -1 则表示旋转的方向相反(这就是矢量方向):
根据上面的测试我们可以假设出一个坐标:
上面的测试已经可以验证 Z 轴的矢量方向(右手定则),和我们的假设坐标是一致的,我们来同时变化一下 XY, YZ, ZX, XYZ 的旋转来验证一下这两个轴的矢量方向。
很显然,修正后的坐标应该是这样的:
案例
接下来我们看一个案例,我们让下面的小人跑起来:
布局文件:
|
|
CSS 样式:
|
|
CSS3 动画:
|
|
例如上面我们让小人的腿动,可以给 leg 添加 run 动画, 动画间隔 1 秒,无限循环,两个 leg 的动画间隔通过 animation-delay: .5s;
来设置。
|
|
最后我们给小人添加一个移动动画就是跑起来的感觉了:
|
|