CSS过渡、动画及变形的基本属性与运用

【逆战班】

动画可以让一个元素具有动态的效果，这个过程是使元素从一种样式变成另一个样式的过程。我们可以通过设置关键帧的方法来控制动画在某个时间节点的运动方式。通常设置多个节点来实现复杂的动画效果。0%是动画的开始时间，100%是动画的完成。

一、transition（过渡）

transition主要包含四个属性：

执行变换的属性：transition-property

规定设置过渡效果的CSS属性的名称。all ( 默认值 ) , 指定 width , height;

变换时间：transition-duration

规定完成过渡效果需要多少秒或毫秒。

速率变化：transition-timing-function

规定速度效果的速度曲线。运动形式：加速、减速、匀速...

liner（匀速）

ease（默认值）

ease-in（加速）

ease-out（减速）

ease-in-out（加速然后减速）

cubic-bezier（自定义属性值）

变换延迟时间：transition-delay

定义过渡效果何时开始。例如：1s : 延迟1秒进行过渡，-1s : 提前1秒进行过渡

下面来做一个简单的案例：

首先定义一个容器

<body>

    <div id="box"></div>

</body>

然后给容器添加transition属性和背景色

<style>

    #box{ width:100px; height: 100px; background:red;

        transition-duration : 2s;

        transition-property : all;

        transition-delay: 1s;

        transition-timing-function: linear;

    }

    </style>

当鼠标移入时让容器改变大小和背景色

#box:hover{width: 200px;

    height: 200px;

    background-color: blue;}

这样就做了一个简单的案例，当鼠标移入之后容器会在两秒后变大，并且背景色会变成蓝色

二、animation（动画）

1.定义动画轨迹

@keyframes name {

        0% {}

        100% {}

    }

2.调用动画

animation-name : 设置动画的名字

animation-duration : 动画的持续时间

animation-delay : 动画的延迟时间

animation-iteration-count : 动画的重复次数，默认值就是1 ，infinite无限次数

animation-timing-function : 动画的运动形式

liner（匀速）

ease（默认值）

ease-in（加速）

ease-out（减速）

ease-in-out（加速然后减速）

#box2{ width:100px; height:100px; background:red;

animation-name: name;

animation-duration: 2s;

animation-delay: 3s;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

三、transform（变形）

translate : 位移

transform:translate(X,Y); 元素向指定点移动

transform:translateX(X);元素沿X轴移动

transform:translateY(Y); 元素沿Y轴移动

transform:translateZ(Z); 元素沿Z轴移动（3D）

scale : 缩放

transform:scale(num) num是一个比例值，正常比例是1。

transform:scale(num1 , num2) 两个值分别对应宽和高

transform:scaleX()通过设置X轴的值来定义缩放转换。

transform:scaleY()通过设置Y轴的值来定义缩放转换。

transform:scaleZ()通过设置Z轴的值来定义 3D 缩放转换。

rotate : 旋转

transform:rotate(num) num是旋转的角度单位：deg ，正值：顺时针旋转，负值：逆时针旋转

rotateX()定义沿着 X 轴的3D旋转。

rotateY()定义沿着 Y 轴的3D旋转。

rotateZ()定义沿着 Z 轴的3D旋转。

skew : 斜切

transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y

transform:skewX()定义沿着 X 轴的倾斜转换。

transform:skewY()定义沿着 Y 轴的倾斜转换。

注：skew没有3d写法。

tranform-origin:基点

tranform-origin（x,y,z）设置元素运动基点，默认值：center,center,0

@keyframes name {

        0% { transform:translate(0,0); }

        25%{ transform:translate(300px,0); }

        50%{ transform:translate(300px,300px); }

        75%{ transform:translate(0,300px); }

        100% { transform:translate(0,0);}

    }

四、3D动画

perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。

transform-style : 3D空间：flat (默认值2d)、preserve-3d (3d，产生一个三维空间)

perspective-origin : 景深-基点位置，观察元素的角度。取值：left、right、top……

backface-visibility : 背面隐藏 hidden、visible (默认值)