这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

CSS3过渡——transition

通常与hover搭配使用

语法

 div {
     width: 100px;
     height: 100px;
     background-color: red;
     /*谁做过渡给谁加 */
     
     /*transition：transition-property transition-duration transition-timing-function transition-delay*/
     /*transition: 变化的属性 花费时间 运动曲线 何时开始;*/
     transition: width 1s ease 1s;
     
     /*如果想变化多个属性，可以利用逗号分隔*/
     transition: width 1s, height 1s;
     
     /*或者用 all 代替*/
     transition: all 1s;
 }
 
 div:hover {
     width: 200px;
 }

transition-timing-function运动曲线属性值：
- linear——匀速
- ease——逐渐慢下来(默认值)
- ease-in——加速
- ease-out——减速
- ease-in-out——先加速后减速

CSS的2D转换

一、大的概念

CSS3 转换可以对页面中的元素进行：
- 移动：translate
- 旋转：rotate
- 缩放：scale
CSS3的转换方法都归属于transform属性

二、小的细节

01. translate

translate(x,y)定义移动的位置
- 可以是具体数值，也可以是百分比（百分比指的是移动元素本身的宽度或高度）
- 可以是一个数值，也可以是两个数值
  - 一个数值表示X坐标和Y坐标相等
  - 两个数值分别表示X坐标和Y坐标
- 也可以只移动X坐标或者Y坐标
  - translateX(100px);
  - translateY(100px);

translate移动不会影响其它元素位置

对行内标签没有作用

 div:hover {
     /* 然后用translate定义元素移动到的位置 */
     transform: translate(100px, 100px);
     
     /* 也可以分别移动X坐标，或者Y坐标 */
     /* 但需要注意的是，不能同时设置，同时设置，只有最后一个才会生效！ */
     /* transform: translateX(100px); */
     /* transform: translateY(100px); */
 }

（1）百分比的应用

盒子水平垂直居中

 /* 百分比应用：盒子水平/垂直居中 */
 .son {
     /*绝对定位*/
     position: absolute;
     width: 100px;
     height: 100px;
     background-color: red;
     /*定位位置50%*/
     top: 50%;
     left: 50%;
 
     /*移动子元素本身宽高的一半，达到盒子居中*/
     transform: translate(-50%, -50%);
 }

02. transform-origin

transform-origin:X Y定义旋转中心
- 默认值是：50% 50%
- 可设置精确数值 | 方位名词 | 百分比

03. rotate

rotate(angle)定义元素旋转：rotate(45deg)
- 数值为：数字+角度(deg)
可以设置旋转中心：transform-origin

 .box {
     /*定义旋转中心*/
     transform-origin: left bottom;
 }
 
 .box:hover {
     /*鼠标悬浮旋转45度*/
     transform: rotate(45deg);
 }

03. scale

scale(x,y)定义元素缩放
- (x,y)里面写数字，不写单位，数字指的是倍数
- 也可以只设置一个数字
- 大于1是放大，小于1是缩小
- 默认中心点缩放，可以设置缩放中心：transform-origin
- 也可分别给 X|Y 设置缩放
【注意】scale缩放不会影响其它盒子的位置

 
 .box:hover {
     /* 定义缩放，宽度放大两倍，高度放大3倍 */
     transform: scale(2, 3);
 
 }

三、复合写法（简化写法）

translate(X,Y)和其它属性一起写，要放在最前面

 div:hover{
     transform:translate(100px) rotate(90deg) scale(1.2);
 }

CSS的3D转换

一、大的概念

相比于2D转换的（X，Y）平面坐标轴，3D转换多了一个Z轴，变成（X，Y，Z）的三维坐标轴

二、小的细节

01. perspective

perspective用来定义 3D 转换元素的透视视图
- 定义观察点到元素的距离，值越小越近，则后面变化时越明显（大）——近大远小
  
  个人理解，即默认perspective是等于0的，即观察点就在屏幕表面，元素该是多大就是多大
  
  如果设置了距离，则观察点远离屏幕，向人移动，这就会造成近大远小的情况
是必要的，不设置无法观察到3D视图
定义在父元素中（或者祖先元素中），作用在子元素（后代元素）上
```
.father{
    /*默认值为0*/
    perspective:500px;
}
```

02. transform-style

指定元素是怎样在三维空间中呈现的
- 2D呈现：transform-style:flat
- 3D呈现：transform-style:preserve-3d

定义在父元素（祖先元素）中

.father {
    /* 给父元素加透视 */
    perspective: 700px;
    /* 3D呈现，让子元素在3D旋转时，保持3D立体空间 */
    transform-style: preserve-3d;
}

03. transform-origin

transform-origin:X Y Z用来定义3D旋转中心
- X Y Z默认值是：50% 50% 0
可设置的值：长度| 百分比 | 方位名词
- left | center | right ——水平方向取值
  - 对应的百分值为left=0% | center=50% | right=100%
- top | center | bottom ——垂直方向的取值
  - 对应的百分值为top=0% | center=50% | bottom=100%
可设置值的数量：一个值、两个值、三个值

（1）一个值的情况

如果设置的是长度值或者百分比，则为X轴的值，Y轴为默认值50%
如果设置的是方位名词，则观察方位名词是什么方向的
如果是水平方向的: left | right，则为X轴方向的，那么Y值为默认值：50%或者center ；
- （此时只有非X轴旋转才能看到效果）
如果是垂直方向的: top | bottom，则为Y轴方向的，那么X值为默认值：50%或者center ；
- （此时只有非Y轴旋转才能看到效果）

.son {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    transition: 1s;
    
    transform-origin: left;
    /*实际等同于transform-origin:0 50% 0;*/
    
    /*transform-origin: right;*/
    /*实际等同于transform-origin:100% 50% 0;*/
    
    /*transform-origin: top;*/
    /*实际等同于transform-origin:50% 0 0;*/
    
    /*transform-origin: bottom;*/
    /*实际等同于transform-origin:50% 100% 0;*/
}

.point {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #00f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.son:hover {
    /* transform: rotateX(45deg); */
    transform: rotateY(45deg);
    /* transform: rotateZ(45deg); */
}

origin-1.1.gif origin-1.2.gif

origin-2.1.gif origin-2.2.gif

（2）三个值的情况

在三个值情况下，第三个值Z只能是长度值

04. translate

translate3d(x,y,z)定义3D移动转换
- 可以分别设置：
  - translateX(100px);
  - translateY(100px);
  - translateZ(100px);
    - 【注意】这项属性值只能是长度值，其它两项可以是长度值 | 百分比

.father {
    /* 给父元素加透视 */
    perspective: 700px;
    /* 3D呈现，让子元素在3D旋转时，保持3D立体空间 */
    transform-style: preserve-3d;
}

.son {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: red;
    transition: 1s;
}

.son:hover {
    /* 然后用translate定义元素移动到的位置 */
    transform: translate3d(50px, 50px, 200px);
}

有变大的效果，这是因为移动了Z轴位置，离屏幕或者观察点变近了，则元素在感官上就变大了

05. rotate

rotate3d(x,y,z,angle)定义元素3D旋转
- (x,y,z)是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
- (angle)是一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。
分别设置：
- rotataX(angle)
- rotataY(angle)
- rotataZ(angle)

.son:hover {
    /* 然后用rotate定义元素旋转角度 */
    /* transform: rotate3d(1, 1, 1, 45deg); */
    /* transform: rotateX(45deg); */
    /* transform: rotateY(45deg); */
    transform: rotateZ(45deg); 
}

3d-2.3.gif 3d-2.1.gif 3d-2.2.gif

06. scale

scale3d(x,y,z)定义3D 缩放转换
分别设置：
- scaleX()
- scaleY()
- scaleZ()

.son:hover {
    /* 然后用scale定义元素缩放倍数 */

    /* transform: scale3d(1,1,1); */
    transform: scaleX(1.5);
    /* transform: scaleY(1.5); */
    /* transform: scaleZ(1.5); */
    
    /* 【注】这里scaleZ(1.5)是看不到效果的，因为是在Z轴方向上放大的，而Z轴上的长度为0，故看不到效果 */
}

3d-3.2.gif 3d-3.1.gif

三、其它

在设置transform时不要分开写，样式会被覆盖
即这样是错误的
```
div{
	trandform:translateX(50%);
	transform:rotate(45deg);
}
```
旋转的时候注意旋转中心的位置

CSS的动画实现

一、创建动画

使用@keyframes——关键帧，创建动画。

用from定义开始状态，用to定义结束状态

 @keyframes move{
     from {
         transform:translate(0,0);
     }
     to{
         transform:translate(100px,100px);
     }
 }

或者用百分比定义，0%定义起始状态，100%定义结束状态，中间还可以添加其它状态

 @keyframes move{
     0%{
         transform:translate(0,0);
     }
     50%{
         transform:translate(0,100px);
     100%{
         transform:translate(100px,100px);
     }
 }

二、调用动画

在要生成动画的元素选择器中绑定动画

至少指定这两项属性：动画名称、动画时长

 div{
     animation-name:move;
     animation-duration:3s;
     /*简化写法*/
     animation:move 3s;
     /*兼容*/
     -webkit-animation:move 3s;
 }

（1）属性拓展

 div{
     /*调用动画 */
     animation-name: move;
     
     /* 定义过渡时间，默认0s，因此必须设置过渡时间 */
     animation-duration: 10s;
     
     /* 动画运动曲线，默认ease */
     /*  ease | linear | ease-in | ease-out | stpes(number)*/
     animation-timing-function: ease;
     
     /* 动画延迟播放，默认0s */
     animation-delay: 1s;
     
     /* 动画-重复-次数，默认1次，设置infinite无限次 */
     animation-iteration-count: infinite;
     
     /* 是否反方向播放,默认noraml，反向播放reverse，先正后反alternate，先反后正alternate-reverse*/
     animation-direction: normal;
     
     /* 结束后状态,默认backwards 回到起始状态，停在结束状态forwards */
     animation-fill-mode: forwards;
 
     /* 复合写法（简化写法） */
     /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或者结束状态 */
     /* 上述可写成： */
      animation: move 10s ease 1s infinite normal forwards; 
 }
 
 div:hover {
     /* 动画运行状态，默认running运行，鼠标经过停止动画paused  */
     animation-play-state: paused;
 }

~~本人前端小菜鸡，如有不对请谅解~~

【CSS】过渡、转换与动画

CSS3过渡——transition

CSS的2D转换

一、大的概念

二、小的细节

01. translate

（1）百分比的应用

02. transform-origin

03. rotate

03. scale

三、复合写法（简化写法）

CSS的3D转换

一、大的概念

二、小的细节

01. perspective

02. transform-style

03. transform-origin

（1）一个值的情况

（2）三个值的情况

04. translate

05. rotate

06. scale

三、其它

CSS的动画实现

一、创建动画

二、调用动画

（1）属性拓展