学习CSS3的第三天

学习CSS3的第三天

又是新的一天啦，打起精神，学习一起来！！！
今天我们要学习动画！对，没错！是动画！
一、关键帧动画——animation
animation：① ② ③ ④ ⑤ ⑥ ⑦ ⑧；
①animation-name 指定要绑定到选择器的关键帧的名称；
②animation-duration 动画指定需要多少秒或毫秒完成；
③animation-timing-function 设置动画将如何完成一个周期；
④animation-delay 设置动画在启动前的延迟间隔；
⑤animation-iteration-count 定义动画的播放次数；（infinite 循环）
⑥animation-direction 指定是否应该轮流反向播放动画； （alternate 反向运动）
⑦animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式；
⑧animation-play-state 指定动画是否正在运行或已暂停；
（一般我们只用前六个样式）
如何制定动画：
使用@keyframe规则
@keyframes 规则能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
具体演示代码：

.boss {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            animation: run 3s linear 0s infinite;
        }
        @keyframes run {
            0% {
                left: 0;
            }
            50% {
                left: 200px;
            }
            100% {
                left: 400px;
            }
        }

<div class="boss"></div>

页面显示：一个粉色的方块享有匀速移动。（因为是动态的所以截不好图，大家可以动手试试）

二、 元素2D 或 3D 转换——transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
1、缩放——scale
2D缩放：scale(x,y)
3D缩放：scale3d(x,y,z)
也可写成：
scaleX(x)、scaleY(y)、scaleZ(z) 取值是原元素的倍数
2、旋转——rotate（）
2D旋转：rotate（angle）
3D旋转：rotate3d(x,y,z,angle)
也可以写成：
rotateX(angle)、rotateY(angle)、rotateZ(angle)
3、移动——translate
2D移动：translate(x,y)
3D移动：translate3d(x,y,z)
也可以写成：
translateX(x)、translateY(y)、translateZ(z)
三、搭建3D空间
视距设置：
perspective： ；(800px一般为比较适宜距离)
加上3D层：
transform—style：preserve-3d；
设置观看角度：
perspective-origin ： ；（一般是默认的center center）
注：以上三个样式必须写在父级盒子里！
下一篇文章我会给大家展示一些我做出来的3D效果图和动画，大家记得去看哟！吼吼吼！