CSS动画一则全

目录

一.CSS过渡动画

二.2D操作

1.2D位移

 2.2D旋转

3.2D缩放 

4.2D转换综合写法

三.动画 

1.定义动画

2.调用动画

四.3D操作

1.3D位移

2.3D旋转 

 3.3D呈现

4.透视

---

一.CSS过渡动画

transition:要过渡的动画名称(可以填写all表示全部) 花费时间 运动曲线 延迟时间;

tips：谁变化给谁transition

运动曲线：

linear                匀速

ease                  匀减速

ease-in              加速

ease-out            减速

ease-in-out        先加速后减速

多个过渡写法：

//使用英文逗号分隔
transition:过渡动画1 0.5s,过渡动画2 0.1s,...;

---

二.2D操作

1.2D位移

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

tips:

对行内标签无效果

不影响其他元素位置

transform中百分比单位的位移是相当于自身的百分之多少来移动的（我们可以使用该特性来对元素的居中）

 2.2D旋转

transform:rotate(度数deg);

正值表示顺时针旋转，负值表示逆时针旋转

默认旋转中心为元素中心点

修改旋转中心点：

transform-origin:left bottom;

以左下角为旋转中心点

3.2D缩放 

transform:scale(x,y);

如果我们填写（1,1）那么代表宽高都放大一倍（没有放大）

如果我们填写（2,2）那么代表宽高放大俩倍

如果我们只填写一个值（6），那么相当于（6,6）

缩小写法：（0.5,0.5）

4.2D转换综合写法

transform:translate() rotate() scale()...;

需要注意的一点是位移必须在第一位

假如我们将旋转放在了第一位的话，那么会先执行旋转，那么坐标轴的方向就会改变，坐标轴一改变，那么位移会根据当前指定轴坐标移动，这样就会造成偏移位移方向

---

三.动画 

1.定义动画

@keyframes getanim {
    0% {
        //动画效果
    }
    50% {
        //动画效果
    }
    100% {
        //动画效果
    }
}

//或者

@keyframes getanim {
    from {
        //动画效果
    }
    to {
        //动画效果
    }
}

2.调用动画

当我们定义好了一个动画，我们需要指定一个元素来调用它：

animation-name:动画名称;
animation-duration:持续时间;
animation-timing-function:动画速度曲线(默认ease);
animation-delay:动画延时;
animation-iteration-count:播放次数(无限循环=infinite);
animation-direction:动画在下一周期是否逆播放(默认normal/逆播放=alternate);

//这个属性我们可以配和hover使用，当鼠标移到元素上，暂停动画
animation-play-state:规定运行或暂停(默认running/暂停=pause);

animation-fill-mode:动画结束后状态(保持：forwards/回到起始：backwards)

animation-timing-function:

linear：匀速

ease：低速开始-->匀加速-->匀减速

ease-in：动画低速开始

ease-out：低速结束

ease-in-out：低速开始以及结束

step()：指定时间函数中的间隔数量（步长）【常用于逐帧动画】

当然，我们这样一个个设置会疯掉的

动画简写：

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

---

四.3D操作

1.3D位移

transform:translate3d(x,y,z)

transform:translateX(x)

transform:translateY(y)

transform:translateZ(z)

tips:Z轴一般使用PX单位，并且只要书写transform3d，那么这三个值都不能不写，没有的话写0

2.3D旋转 

transform:rotate3d(x,y,z,XXdeg)

transform:rotateX(XXdeg)

transform:rotateY(XXdeg)

transform:rotateZ(XXdeg)


//例子：
transform:rotate3d(1,1,0,45deg)

tips：这里的x,y,z三个值表示旋转轴的矢量，标识希望该轴旋转

上面的例子意思就是x轴，y轴旋转45度，轴不旋转

那么我们有一个疑问，那这俩个轴都旋转想象不出来怎么转的啊

其实我也想象不出来怎么转的，因为根本不是我们想的那样

我们上面说x，y，z三个值表示的是矢量，所以应该是这样的：

 3.3D呈现

当我们想去构建一个3D的模型或者制作3D动画，首先是需要开启3D呈现的：

transform-style:flat(子元素不开启3D立体空间)

transform-style:preserve-3d(子元素开启3D立体空间)

使用transform-style属性来控制子元素是否开启三维立体环境

既然是让子元素是否开启，那么这个属性就要给到对应子元素的父元素上

4.透视

perspective:[建议数值为800-1200]

透视的值越大，盒子就越小（也就是说离我们的电脑屏幕就越远）

呈现近大远小的视觉感受，同样也是需要挂载到被观察子元素的父元素身上