神奇的css动画：animation、transform、transition

前言
动画包括两个部分：描述动画的样式和用于指定动画开始、结束以及中间点样式的关键帧。

相比较于传统的脚本实现动画技术，使用css动画三个主要优点:

1.能够非常容易创建简单动画，甚至不需要了解JavaScript就能创建动画

2.动画运行效果良好，甚至在低性能的系统上，渲染引擎会使用跳帧或者其他技术以保证动画尽可能的流畅。而是用Javascipt实现的动画通常表现不佳（除非经过很好的设计）

3.让浏览器控制动画序列，允许浏览器优化性能和效果，如降低隐藏选项卡的动画更新频率。

简单来说，看下面的例子：

div{
  width: 100px;
  height: 100px;
  background-color: red;
  animation: change 3s;
}
 
@keyframes change{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(200px);
  }
}

1. animation: change 3s 部分是动画的第一部分，用于描述动画的各个规则

2.@keyframes change{}部分就是动画的第二部分，用于指定动画开始、结束以及中间点样式的关键帧

animation语法
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画实际表现是由@keyframes规则实现。

animation的子属性如下：

animation-name：指定有@keyframes描述的关键帧名称
animation-duration：设置动画的一个周期的时长
animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间
animation-direction：设置动画在每次运行完成时反向运行还是重新回到开始位置重复运行
animation-iteration-count：设置动画重复次数，可以指定infinite无线次重复动画
animation-timing-function：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
animation-fill-mode：指定动画执行前后如何为目标元素应用样式
@keyframes规则，一个动画想运行，@keyframes是必不可少的，@keyframes设置动画关键帧
由于动画的时间是通过css样式定义的，关键帧使用<percentage>来指定动画发生的时间点。0%表示动画第一时刻，100%表示动画的最终时刻。因为这两个时间十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。

需要注意，对于一个动画，需要了解那些是必须项和非必须项：

必须项：animation-name、animation-duration 和 @keyframes规则
非必须项：animation-delay、animation-direction、animation-iteration-count、animation-play-state、animation-timing-function、animation-fill-mode。当然不是说它们不重要，只是不设置时，它们都有默认值。
如下定义：

p {
  animation-duration: 3s;
  animation-name: slidein;
}
 
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
 
  to {
    margin-left: 0%;
    width: 100%;
  }
}

animation-duration 属性指定 <p> 上的动画从开始到结束耗费 3 秒，@keyframes 指定使用名字为“slidein”的关键帧。

关键帧是用 @keyframes 定义的。该例中，我们只使用了两个关键帧。第一个出现在 0%（此例中使用了别名 from）处，此处元素的左边距为 100%（即位于容器的右边界），宽为 300%（即容器宽度的 3 倍），使得在动画的第一帧中标题位于浏览器窗口右边界之外。

第二帧出现在 100%（此例中使用了别名 to）。元素的左边距设为 0%，宽设为 100%，使得动画结束时元素与窗口左边界对齐。

animation-name / animation-duration
通过animation-name，绑定到选择器的 keyframe 名称，简单来说就是名字，css引擎会找到对应的@keyframes规则，其命名规范是和css规则一样的。

而animation-duration是设置动画一个周期的时长，单位秒或毫秒，例：3s、3000ms。

如下示例中，设置动画整体持续3s。

 

animation-delay

animation-delay，它可以设置动画延时，即从元素加载完成之后到动画序列开始执行的这段时间。

示例：

  <div class="div1"></div>
  <div class="div2"></div>

div {
  width: 100px;
  height: 100px;
  background: pink;
  margin: 20px 0;
  animation-name: move;
  animation-duration: 2s;
}
.div2{
  animation-delay: 1s;
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

关于animation 属性，也可以简写为animation :move 2s 1s,第一个时间值表示持续时间，第二个时间表示演示时间。

animation-timing-function
规定动画的速度曲线，默认ease

linear：从头到尾的速度相同
ease（默认）：以低速开始，然后加快，在结束之前变慢
ease-in：动画以低速开始
ease-out：动画以低速开始
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：动画以低速开始和结束白塞尔曲线
示例：

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

.item{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: pink;
  margin: 20px;
}
.item:nth-child(1){
  background: red;
  animation: sprite 3s linear infinite;
}
.item:nth-child(2){
  background: green;
  animation: sprite 3s ease infinite;
}
.item:nth-child(3){
  background: blue;
  animation: sprite 3s ease-in infinite;
}
.item:nth-child(4){
  background: rgb(15, 15, 4);
  animation: sprite 3s ease-out infinite;
}
 
.item:nth-child(5){
  background: purple;
  animation: sprite 3s ease-in-out infinite;
}
.item:nth-child(6){
  background: purple;
  animation: sprite 3s cubic-bezier(0.25, 0.4, 0.4, 1) infinite;
}
 
@keyframes sprite {
  0% { 
    transform: translateY(0);
  }
  100% { 
    transform: translateY(200px);
  }
} 

 animation-iteration-count

定动画播放次数，默认1；n（次数），infinite（无限）。

animation-iteration-count: n | infinite; 

animation-direction

规定是否应该轮流反向播放动画；normal（正常播放），alternate（交替播放），reverse（倒序播放），alternate-reverse（反向交替播放）。

animation-direction: normal | alternate | reverse | alternate-reverse; 

animation-play-state

规定动画正在运行还是暂停，paused（动画已暂停），running（动画正在播放）。

animation-play-state: paused | running; 

transform
transform允许你选装、缩放、倾斜或平移指定元素。旋转分为2D旋转和3D旋转，正数为顺时针旋转，负数为逆时针旋转，单位：deg

rotate-旋转
transform-origin

旋转元素一般配合着transform-origin属性，transform-origin是用来设置旋转点的。

默认值是center center即中心点

transfrom-origin:0px 0px; 

2D旋转

transform: rotate(45deg); // 顺时针旋转45度 

示例：

div{
  width: 100px;
  height: 100px;
  background-color: rgb(64, 136, 44);
  animation: change 1s linear infinite;
}
@keyframes change{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

3D旋转

transform: rotate3d(x,y,z,angle); 

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。
z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。
angle：一个角度值，指定在3D空间旋转角度。

scale - 缩放

transfrom:scale(x,y); 

x：表示水平方向缩放的倍数。
y：表示垂直方向缩放的倍数，y为可选参数，不设置则表示x，y同时缩放相同倍数。

示例：

 div{
  width: 100px;
  height: 100px;
  background-color: rgb(64, 136, 44);
  animation: change 1s linear infinite;
}
@keyframes change{
  0%{
    transform: scale(0.5);
  }
 
  100%{
    transform: scale(1);
  }
}

 

 

 

 skew-扭曲

transform: skew(x,y); 

x：x轴(水平方向)倾斜
y：y轴(水平方向)倾斜

 

translate - 移动
transition
transition css属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。过度可以为一个元素不同状态之前切换的时候定义不同的过渡效果。像是 :hover，:active 或者通过 JavaScript 实现的状态变化。也是css过度目前比较常用的

transition-property：过度属性，默认值：all
transition-duration：过度持续时间，默认值：0s
transition-timing-function：过度函数，默认值ease
transition-delay：过度延迟时间，默认值0s
示例：

 

 

 

 

 

 

来源：https://blog.csdn.net/weixin_46872121/article/details/142377383