CSS过渡、动画、关键帧

-

CSS3 过渡（transition)

• 概念 ：通过过渡可以指定某个属性发生变化时的切换方式

注：过渡时，必须是从一个有效值向另外一个有效值进行过渡,谁需要过渡给谁加

属性

• transition-property：指定要执行过渡的属性（多个属性之间用 , 隔开）, 若所有属性都需要过渡则使用all

• transition-duration 指定效果的持续时间 时间单位 s 和 ms 1s=1000ms

• transition-timing-function:过渡的时序函数 指定过渡的执行方式

  • 可选值：
    • ease 默认值 慢速开始，先加速再减速
    • linear 匀速运动
    • ease-in 加速运动
    • ease-out 减速运动
    • cubic-bezier() 来指定时序函数
    • steps() 分步执行过渡效果
      • steps(2,end) 结束时执行过渡（默认值）
      • steps(2,start) 开始时执行过渡

• transition-delay ：过渡的效果延迟，等待一段时间后再执行过渡

  注：仅仅设置过渡的属性名没有用，需要配合过渡的执行时长一起使用

  • 多个属性名和多个执行时间一一对应
  • 当属性名多余执行时长个数时，执行时长重复，一一对应

贝塞尔曲线

cubic-bezier(x1,y1,x2,y2);

• 这个坐标，决定了速度曲线的形状，不同的形状所对应的速度不一样，甚至可以为负
• 贝塞尔网址：https://cubic-bezier.com/#.35,.74,.84,.21
• 直接点击：贝塞尔曲线

简写属性

• transition:可以同时设置过渡的相关的所有属性，多个属性过渡用逗号隔开

transition : 要过渡的属性 花费时间 运动曲线 何时开始 ;
/* 多个属性同时执行,中间使用逗号隔开 */
transtion: 属性名  执行时长   延迟时长  速率，属性名  执行时长   延迟时长  速率；

只有一个要求，若要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

注意：并不是所有属性都可以设置过渡，比如display

CSS3动画（animation)

完成自动播放的动画

1. 编写JavaScript脚本完成自动播放
2. 可以使用flash技术来完成动画的设计
3. 可以借助某些动画的标签，比如marquee
4. h5提供了canvas技术（绘图技术）完成动画的设计
5. css3提供了animation动画可以完成持续自动播放

执行步骤

1. 定义动画关键帧
   • 指盒子将要发生变化的帧，就是设置需要播放的动画的步骤，一个完整的动画被拆分为多个步骤，将多个步骤组合起来形成的动画，每个步骤就是一个关键帧
   • 例子：盒子向右移动100px，有两个关键帧，开始状态和结束状态
   • 例子：盒子变成圆后，向右移动100px，有3个关键帧： 开始状态——变圆——右移100px
   • css3 动画：定义关键帧
2. animation使用动画关键帧

概述

• 与过渡类似，都是可以实现一些动态效果

• 设置动画效果，必须先设置一个关键帧，设置了动画执行的每一个步骤

• 语法

  方式一
  @keyframes  动画名{
    from{   /*动画开始的位置 */
       margin-left : 0 ;
     }
   to{    /*动画结束的位置  */
       margin-left:700px;
        }
    }
  方式二
  /*   百分比为时间占比    */
  @keyframes  动画名{
    0%{   /*动画开始的位置 */
       margin-left : 0 ;
     }
      50% {
          margin-left : 400px ;
      }
    100%{    /*动画结束的位置  */
       margin-left : 700px ;
        }
    }
  

animation属性

• animation-name:ident; ident 为对当前元素生效的关键帧的名字

• animation-duration:2s;动画执行的时间

• animation-delay：2s; 动画的延时

• animation-timing-function：贝塞尔曲线

  • ease 默认值 慢速开始，先加速再减速
  • linear 匀速运动
  • ease-in 加速运动，低速开始
  • ease-out 减速运动，低速结束
  • cubic-bezier(x1,y1,x2,y2) 来指定时序函数,贝塞尔曲线
  • steps() 分步执行过渡效果
    • steps(2,end) 结束时执行过渡（默认值）
    • steps(2,start) 开始时执行过渡

• animation-interation-count: 动画执行的次数

  • 可选值：
    • 次数,数字
    • infinite 无限执行

• animation-direction：指定动画运行方向

  • 可选值：
    • normal默认值 从from-to 运行，每次都如此
    • reverse 从to- from 运行，每次都这样
    • alternate 从from向to 运行（奇数次），重复时，反向执行(偶数次)
    • alternate-reverse 从to-from 重复时反向执行

• animation-play-state： 设置动画执行的状态

  • 可选值：
    • running 默认值 动画执行
    • paused 动画暂停

• animation-fill-mode：动画填充模式（设置第一帧和最后一帧是否作用在元素上）

  • 可选值：
    • none 默认值 动画执行完元素回到原来的位置
    • forwards动画执行完，元素会停到结束的位置
    • backwards 动画延时等待时，元素会处于开始位置
    • both 结合了forwards和backwards

• animation：简写属性；延时在执行时间之后

   animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 是否返回起始点;   
  

  只有一个要求，若要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

关键帧2d-3d

3d转换基础

三维坐标系

变形平移：

• 变形：指通过css来改变元素的形状或位置

• 变形不会影响页面布局

• transform：用来设置元素的变形效果

平移：

• translateX() 沿X轴平移

• translateY() 沿Y轴平移

• translateZ() 沿Z轴平移 调整元素在Z轴的位置，属于立体效果（近大远小）默认网页不支持透视，若需要看见，则必须设置网页视距（景深）

    html{
  /*  设置当前网页的视距为800px 人眼距网页的距离  */
      perspective:800px;
      }
  

盒子以原来的位置作为参考点，进行平移

旋转： 坐标轴会改变

• 通过旋转可以使元素沿x,y,z轴旋转指定角度

• rotateX(deg) 围绕 x 轴旋转

• rotateY(deg) 围绕 y 轴旋转

• rotateZ(deg) 围绕 z 轴旋转

• rotate3d(x,y,z,deg) 前面的x,y,z是三维坐标系中的一个点的坐标，最后一个是旋转角度（正数顺时针，负数逆时针），该旋转轴是（0,0,0)与(x,y,z) 连接线

• backface-visibility 是否显示元素背面

  • hidden 隐藏

  • visible 显示

缩放：

• 对元素进行放大缩小

  • scale() 双方向对元素进行缩放的函数

  • scaleX() 水平方向缩放

  • scaleY() 垂直方向缩放

  • scaleZ() z轴方向缩放 厚度

  transform-origin：变形原点 默认值 center center center

  transform-origin:x,y,z;
  

  设置3d变形效果,设置某元素的子元素以何种形式在父元素的空间里

  • transform-style:preserve-3d;
    • 默认值为 flat 不显示3d效果 ，在2d平面显示
    • preserve-3d 所有元素在3d空间中呈现

值大于1放大，值为0 消失 值为0-1 缩小

灭点

• 灭点：是指在动画里视线的消失点

• perspective-origin可以设置灭点，设置3d盒子的观察位置

• 作用：以不同的角度查看3D盒子

• 语法：

  perspective-origien:x轴 y轴；
  

  • 取值：
    • 单词：left right center top bottom 两两搭配使用
    • 像素
    • 百分比
  • 默认值：center center，从舞台的正中心点观察盒子，看元素默认时对称

• 注意：

  • 这个属性设置最大的盒子使用（设置景深的盒子）
  • 一个3D舞台（设置了景深就创建了一个3D舞台）就有一个灭点。默认灭点是在舞台的中心点，观察者正对着舞台看元素

倾斜（斜切）

• 可以让元素沿着x轴或y轴进行倾斜转换，skew来控制

• 语法：

  沿着x轴和y轴进行倾斜
  transform:skew(角度1，角度2)；
  沿着x轴倾斜
  transfrom:skew(角度)；
  transfrom:skewX(角度)；
  沿着y轴倾斜
  transfrom:skewY(角度)；
  

  • skewX：沿着x轴进行倾斜，角度越大，越接近于x轴，当角度为90度时，元素会和x轴平行，消失不见
  • skewY：沿着Y轴进行倾斜，角度越大，越接近于Y轴，当角度为90度时，元素会和Y轴平行，消失不见

转换基点

• 基点：进行2D转换的参考点，可以通过transfrom-origin改变转换的参考点的位置

• 语法：

  transfrom-origin:x   y；
  x代表在x轴上的位置，y代表在y轴上位置
  

  • 单词：left right center top bottom 两两搭配使用
  • 像素
  • 百分比
  • 默认值为盒子的中心点，center center 或 50% 50%

• 注意：

  • 针对旋转和缩放来说，因为转换和中心点有关，所以改变转换基点是会受影响
  • 针对位移来说，位移是参考原来的位置进行移动，跟转换基点无关，所以不会受影响
  • 设置转换基点时，在元素改变前的样式设置转换基点，因为默认元素的转换基点是中心点，如果在改变样式时进行设置，那么转换基点会从中心点变为指定的点，样式会发生错乱

组合变换

• 在进行2D转换时，会将多个2D转换组合起来使用，中间使用空格隔开

  transform : translate()  rotate()  scale() ；
  transform: translate3d(x,y,z)
  transform : rotateX(20deg)  rotateZ(30deg);
  

1. 空格隔开
2. 属性值的顺序影响效果
3. 位移要放在前面
4. 旋转会改变坐标轴的方向