关于动画、2D、3D的一些知识

animation动画

概述

通过 CSS3，我们能够创建动画 如果要在 CSS3 中创建动画，需要使用 @keyframes 规则 animation属性是复合属性 检索或设置对象所应用的动画特效

@keyframes 创建动画

语法：
@keyframes 动画名{
     具体关键样式变化
}
@-webkit-keyframes 动画名{
     具体关键样式变化
}

//关键字
@keyframes 动画名{
     from{}
     to{}
     to{}
 }
 //百分比
 @keyframes 动画名{
     0%,100%{}
     50%{}
    /* 100%{}*/
 }

animation-name

• 作用：指定动画名称

• 取值

  • 默认 none 规定无动画效果

  • @keyframes定义动画名称

animation-duration 属性

• 作用：定义动画持续的时间

• 取值

  • 单位：以秒或毫秒计

  • 默认值为0，需要设置该属性，否则不会播放动画

animation-timing-function

• 作用：定义动画的时间函数

• 取值

  ● linear 匀速 ● ease 缓动[默认值]。动画以低速开始，然后加快，在结束前变慢。 ● ease-in 加速——动画以低速开始。 ● ease-out 减速——动画以低速结束。 ● ease-in-out 先加速后减速——动画以低速开始和结束。

animation-delay

• 作用：定义动画开始前等待的时间，

• 取值

  • 以秒或毫秒计。

  • 默认值是 0

  • 允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)

   .box {
       animation-name:move;
       animation-duration: 5s;
       animation-timing-function: ease-in;
       animation-delay: -1s; 
       animation-iteration-count: infinite;         
  }

animation-iteration-count

• 作用：定义动画播放次数

• 取值

  • 1【默认值】表示1次

  • 数值 定义动画播放次数

  • infinite 规定动画应该无限次播放。

animation-iteration-count: infinite; 

animation-direction

• 作用：定义动画运动的方向

• 取值

  • normal：正常方向

  • reverse：反方向运行

  • alternate：正向反向交替—》动画先正常运行再反方向运行，并持续交替运行

  • alternate-reverse：反向正向交替——》 动画先反运行再正方向运行，并持续交替运行

animation-play-state

作用：动画的执行状态

取值：

• running:运动【默认】

• paused: 暂停

animation-fill-mode

作用：设置动画在运动时间之外的状态

• none 默认值

  • 进场之前和动画结束之后都停留在元素的初始状态

• forwards 动画结束之后停留在结束帧状态

• backwards 动画进场之前停留在初始帧状态

• both 以上两者

animation简写

• 语法：

  animation:
  动画名字 动画持续时间  动画时间函数 动画延迟时间  动画执行次数 动画的方向 动画的播放状态  填充模式
  默认值：none 0 ease 0 1 normal  running none;

  • 空格隔开

  • 靠前的时间表示持续时间，靠后时间为延迟时间

• 多组值

  • 以上每一个属性都允许多组值，【逗号】隔开

  • 简写多组值： 【逗号】隔开

.box{
    width:100px;
    height:100px;
    background-color: red;
    position:absolute;
    left:0;
    top:0;
​
    /* animation-name:move,changebg;
    animation-duration: 1s,3s;
    animation-timing-function: ease-in,linear;  */
​
    animation:move 1s ease-in,changebg 3s linear;
}
​
@keyframes move{
    0%,100%{
        left:0;
        top:0;
    }
    25%{
        left:300px;
        top:0;
    }
    50%{
        left:300px;
        top:300px;
    }
    75%{
        left:0;
        top:300px;
    }
}
​
@keyframes changebg {
​
    0%{
    background-color: red;
    }
    100%{
    background-color: green;
    }
​
}

帧动画和过度动画的区别：

过渡动画：需要触发事件，只能完成两点之间的动画（实现简单的效果）

帧动画：不需要条件 可以完成复杂轨迹的动画

animate动画库

简介

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。借助 animate.css 能够很方便、快速的制作 CSS3 动画效果

使用动画库不仅可以提升效率，也可以成为我们学习定义各种类型动画的一种方式

地址：

https://animate.style/

兼容

只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

操作步骤

1）引入文件

<link rel="stylesheet" href="animate.min.css">

2）添加类名

<div class="box animate__animated animate__wobble animate__delay-2s animate__faster animate__repeat-3"></div>

给元素加上 class 后，刷新页面，就能看到动画效果了。

说明

animate__animated 定义动画持续的时间及填充模式
animate__wobble   调用动画即使用@keyframes定义的动画名
animate__delay-2s  定义动画延迟的时间
animate__repeat    定义动画重复的次数
				   动画是无限播放的，可以添加类名 animate__infinite
animate__faster    定义动画的速度

例：动画延迟的时间

animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s

例：动画的快慢

animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

例：动画重复的次数

animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	infinite

兼容

只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

transform 转换

概述

转换（变换）即使元素改变形状、尺寸和位置的一种效果

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

初始值是none。

2D转换（变化）

概述

2D即二维空间是指仅在X轴和Y轴两个维度组成的平面空间

2D转换即在2D空间内的转换，包括平移、缩放、旋转、斜切

2d坐标轴：

 

注意：变换后的元素不会影响周围的元素，但是可以像定位的元素一样重叠。但是变换后的元素在其默认位置，仍然在布局中占用空间

2d转换的方法

translate(x,y)

• 作用：沿X,Y轴位移

• 参数

  • 长度值

  • 可以是1-2个值

  • 1个值表示沿X轴位移，两个值表示分别沿X轴，Y轴位移

• 取值:

  • px

  • 百分比（强调相对于元素本身大小计算）

  • 说明：允许负值，正值默认向右向下，负值向左向上

• 拆分单独定义

  • translateX( 长度值 ) 沿X轴缩放

  • translateY( 长度值 ) 沿Y轴缩放

• 结合定位实现居中第三种方式

  父盒子{
  	position:relative;
  }
  子盒子{
  	position:absolute;
  	left:50%;
  	top:50%;
  	//沿着自身原来位置移动自身宽度、高度的一半
  	transform:translate(-50%,-50%);
  }

scale(x,y)

• 作用:沿x,y轴缩放元素大小

• 参数

  • 数值，表示缩放倍率

  • 可以是1-2个值

    • 1个值，表示沿X轴，Y轴同时缩放

    • 2个值 两个值表示分别沿X轴、Y轴缩放

• 取值

  • 默认值为1 不放大也不缩小

    • 使用0~1之间的值 【 缩小】元素

    • 使用大于1的值【放大】元素。

    • 允许负值——负值表示先反转再缩放

• 单独定义

  • scaleX( 缩放倍率 ) 沿X轴缩放

  • scaleY( 缩放倍率 ) 沿Y轴缩放

skew(x,y)

作用：沿x，y轴 倾斜元素

参数：

角度（单位通常使用deg）

语法：

• skew(x,y) 水平方向和垂直方向同时倾斜

  • 1个值沿X轴方向的斜切

  • 2个值分别表示沿X,Y轴方向的斜切

单独定义：

• skewX(x) 仅水平方向（X轴）倾斜

• skewY(Y) 仅垂直方向（Y轴）倾斜

rotate( angle )

作用： 定义2d旋转

参数：

角度（单位通常使用deg）

取值

• 角度，单位deg

• 正数表示顺时针旋转，负数表示逆时针旋转

转换基点

概述：transform-origin 定义转换原点（基点）

语法：

transform-origin：x轴位置  y轴位置  Z轴位置（默认0）;

空格隔开的两个值时，分别表示x轴，Y轴位置 
				 一个值时，另一个值默认center

取值

• px (相对于元素本身左上角为0.0点的坐标位置) / 百分比 （元素自身大小的百分比）

• 关键字

  • 水平：left center right

  • 垂直：top center bottom

3d转换

概述

3D即三维空间是指由X,Y,Z三个维度所构成的空间，3D转换即在三维空间内转换

3d坐标轴：

 

3d转换的方法

rotateX(angle)

• 作用：沿着 X 轴旋转。

• 取值

  • 角度：单位deg

  • 正值顺时针，负值逆时针

perspective属性

表示视距（观察者距离视图的距离）

• 作用：使子元素以透视效果显示（近大远小）

• 取值

  • number 元素距离视图的距离，以像素计。

  • none（0）默认值。表示没有透视效果透视。

  • 值越小透视效果越明显

• 注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

rotateY(angle)

• 作用：沿着 y 轴旋转。

• 取值

  • 角度：单位deg

  • 正值顺时针，负值逆时针

rotateZ(angle)

• 作用： 沿着 Z 轴旋转。

• 取值

  • 角度：单位deg

  • 正值顺时针，负值逆时针

• 代码演示

translateZ( z )

• 作用：沿Z轴位移

• 取值

  • px

  • 不允许百分比值

• 代码演示

scaleZ( z )

• 作用：沿Z轴缩放

• 取值

  • 默认值为1

  • 使用0~1之间的值【缩小】元素， 使用超过1的值【放大】元素。

transform-style

定义嵌套子元素是否以3d空间呈现

取值：

• flat 子元素在2D平面呈现。

• preserve-3d 子元素以3D空间呈现。

• 注

  • 通常加给父元素

  • 只对3d转换的元素有效

transform多组值 简写

• 多重转换 —— 空格隔开

transform:rotateY(80deg) scaleZ(2);

兼容

 

3D函数

tranlate3d(X,Y,Z)

定义元素在X,Y,Z轴上的平移

 例：
 translate3d(100px,200px,300px)  表示分别沿x轴平移100px, y轴平移200px,Z轴平移300px

scale3d(x,y,z)

定义元素在X,Y,Z轴上的缩放

例：
	scale3d(2,1.5,0.5) 表示分别沿x轴放大2倍，y轴放大1.5倍，Z轴缩小0.5

rotate3d(tx,ty,tz,角度)

• 定义元素在X,Y,Z轴上的旋转

  • tx,ty,tz 矢量值

  • 其中两上为0，另一个值只有0与非0的区别

rotate3d(0,0,1,30deg)  沿Z轴旋转30deg  相当于 rotateZ(30deg)
rotate3d(1,0,0,30deg)  沿X轴旋转30deg  相当于 rotateX(30deg)
rotate3d(0,1,0,30deg)  沿y轴旋转30deg  相当于 rotateY(30deg)

• 其中两个不为0，tx,ty,tz相当于倍率

rotate3d(1,1,1,30deg)   沿X轴旋转30deg  沿y轴旋转30deg  沿z轴旋转30deg 
rotate3d(0.5,1,0,30deg)  沿X轴旋转15deg  沿y轴旋转30deg