变形动画、过渡和动画

变形动画

坐标系统

要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制元素的变形

X轴是水平轴
Y轴是垂直轴
Z轴是纵深轴

变形操作

定义：使用 transform 规则控制元素的变形操作，包括控制移动、旋转、倾斜、3D转换等操作

transform

属性值	作用
none	定义不进行转换，默认
translate(x,y)	定义 2D 转换
translate3d(x,y,z)	定义 3D 转换
translateX(x)	定义转换，只是用 X 轴的值
translateY(y)	定义转换，只是用 Y 轴的值
translateZ(z)	定义 3D 转换，只是用 Z 轴的值
scale(x,y)	定义 2D 缩放转换
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(x)	通过设置 X 轴的值来定义缩放转换
scaleY(y)	通过设置 Y 轴的值来定义缩放转换
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换
rotate(angle)	定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	定义 3D 旋转
rotateX(angle)	定义沿着 X 轴的 3D 旋转
rotateY(angle)	定义沿着 Y 轴的 3D 旋转
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换
perspective(n)	为 3D 转换元素定义透视视图

注意：Y轴参数不可以使用百分比

transition

transform-origin

过渡

定义：可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

帧动画：通过一帧一帧的画面按照固定顺序和速度播放

transition-property

定义：指定应用过渡属性的名称

多个属性间使用,隔开

属性值

none:没有过渡动画
all:所有可被动画的属性都表现出过渡动画
属性名称，由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头

transition-duration

定义：指定过渡效果的持续时间

属性值

以秒或毫秒为单位

transition-timing-function

定义：指定过渡的执行方式(过渡的时序函数)

属性值

ease:默认值，慢速开始，先加速，再减速
linear:匀速运动
ease-in:加速运动
ease-out:减速运动
ease-in-out:先加速，后减速
cubic-bezier():指定时序函数(网站)
steps():分步执行过渡效果
- 设置第二个值
- end:在时间结束时执行过渡(默认值)
- start:在时间开始时执行过渡

transition-delay

定义：过渡效果的延迟，等待一段时间后在执行过渡

属性值

时间单位

简写

transition: 要过渡的属性花费时间运动曲线何时开始;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <style>
        .bemo1{
            width:800px;
            height:800px;
            background-color:cornflowerblue;
            overflow:hidden;
        }
        .bemo{
            width:100px;
            height:100px;
            background-color:coral;
            transition: margin-left 4s ease-out 2s;
        }
        .bemo:hover{
            margin-left:700px;
        }
    </style>
</head>
<body>
    <div class="bemo1">
        <div class="bemo"></div>

    </div>
</body>
</html>

动画

要创建 CSS3 动画，你需要了解 @keyframes 规则

@keyframes 规则是创建动画

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

@keyframes name{
    /* from  表示动画的开始位置，相当于0% */
    from{

    }
    /* to  表示动画的结束位置，相当于100% */
    to{

    }
}

animation-name

定义：指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列，规定 @keyframes 动画的名称

animation-duration

定义：规定动画完成一个周期所花费的秒或毫秒，默认是 0

animation-delay

定义：规定动画何时开始，默认是 0

animation-timing-function

定义：规定动画的速度曲线。默认是 “ease”

属性值

linear:动画从头到尾的速度是相同的
ease:动画以低速开始，然后加快，在结束前变慢
ease-in:动画以低速开始
ease-out: 动画以低速结束
ease-in-out:动画以低速开始和结束
steps(int,start|end):指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：
- start：表示直接开始
- end：默认值，表示戛然而止
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-iteration-count

定义：规定动画被播放的次数，默认是 1

属性值

数字：执行循环次数
infinite:无限执行

animation-direction

定义：规定动画是否在下一周期逆向地播放，默认是 “normal”

属性值

normal:每个循环内动画向前循环，默认设置
alternate:动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向
reverse:反向运行动画，每周期结束动画由尾到头运行
alternate-reverse:动画第一次运行时是反向的，然后下一次是正向，后面依次循环

animation-play-state

定义：规定动画是否正在运行或暂停，，默认是”running”

属性值

running:动画执行，这是默认值
paused:动画暂停

animation-fill-mode

定义：规定动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

属性值

none:当动画未执行时，动画将不会将任何样式应用于目标,默认值
forwards:目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值
backwards:在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值
both:动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性

关键帧