CSS动画

CSS动画学习

css动画作为一枚前端汪必备技能萌芽决定今天来好好的总结一下！如果平常不经常用到的话时间久了就很容易产生遗忘，所以要养成记笔记的好习惯哦！

• animation（动画）
• transition（过渡）
• transform（变形）
• @ keyframes 选择器​​​

在css3中有着2D转换和3D转换，转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。配合上我们的动态效果能达到非常棒的效果哦！

animation属性

动画的简写属性！他的六个属性分别是：

1. name（选择器keyframe名称）
2. duration（花费时间）
3. timing-function（速度曲线：俗话讲就是一会儿快一会儿慢）
4. delay（开始的延迟）
5. iteration-count（播放几次）
6. direction（是否回放）

name：代表选择器keyframe的名称。

duration：3s 单位为秒，默认单位是0表示没有动画效果。

timing-function：贝塞尔速度曲线。linear(相同速度)，ease(默认，从慢到快)，ease-in(低速开始)，ease-out(低速结束)，ease-in-out(低速开始和结束)，cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

可以在浏览器调试出自己想要的曲线效果然后直接复制粘贴。

delay：3s 单位为秒，表示几秒后开始动画。

iteration-count：2 循环播放次数，n次到无数次。infinite 无限循环。

direction：是否倒叙播放，默认为normal表示正常播放，alternate 轮流反向播放。

transition属性

过滤的简写属性，他有着四种过滤属性：

1. property（过渡效果的 CSS 属性的名称 / 个人感觉用处不大不写也会自己过滤）
2. duration（花费时间）
3. timing-function（速度曲线）
4. delay（开始时间）

和上面有些属性重复这里就不多介绍了，只讲一下不一样的，比如property指的是将要执行过滤的css属性名。

transform属性

和上面两种方法不同的是transform属性并不是动画，需要配和上面两种方法才能达到动态效果。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2D转换和3D转换的区别无非在于有没有Z轴，只是靠文字来了解的话理解起来会比较困难咱们来放个图：

2D效果图=======================================

3D效果图=======================================

这里讲概念不如直接操作，放上一个萌芽自己做着玩的小方块o(∩_∩)o ，核心代码：

transform: translate3d(x, y, z);  定义 3D 转换。【单位使用deg，意思是角度】

可以看到在最终其实还是一个小方块。他的原理主要都是在一个平面上调整他的位置，最后再给他添加动画这样小方块就动起来了，这个需要耐心去调，推荐用Chrome慢慢调试。想要代码的可以留言给我www

• translate（定义转换 / 其实就是位置移动）
• scale（定义缩放）   //这里萌芽提一下缩放实用小技巧，一般浏览器不兼容字体小于8px如果想更小的话可以用缩放哦
• rotate（定义旋转）
• skew（倾斜转换）
• matrix（使用矩阵定义转换）

@keyframes 选择器 

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myfirst{
from {background: red;}   //开始
to {background: yellow;}  //结束
}

一般一些比较复杂的动画我们会使用keyframes来定义，这样调用的时候看起来也更加简洁干净。使用keyframes选择器的时候必须有【名字】【过程】【样式】然后用 animation 和 transition 直接调用就ok啦！