CSS动画效果

过渡

关键字：transition
作用：

• 可以指定一个属性发生变化时的切换方式
• 可以创建一些非常好的效果，提升用户的体验

四个属性

1. transition-property：指定我们要执行过渡的属性

大部分属性都支持过渡效果，宽度、高度、内边距、外边距、像素、颜色等 多个属性间用逗号隔开，如果所有属性都要过渡，则使用all关键字
注意：过渡时必须从一个有效值向另外一个有效值进行过渡

例如：

transition-property: width;

2. transition-duration：指定过渡效果的持续时间

时间单位：秒（s）和毫秒（ms） 1s=1000ms

例如

transition-duration: 2s;

3. transition-delay：过渡效果延迟

transition-delay:2s；/*2s后再开始执行过渡效果*/

4. transition-timing-function：过渡的时序函数

指定过渡的执行方式

可选值：

• ease：默认值，慢速开始，先加速，后减速
• linear：线性方式，匀速运动
• ease-in：慢速开始，加速运动
• ease-out：快速开始，减速运动
• ease-in-out：先加速，后减速
• cubic-bezier（）：来指定时序函数
• step（）：分步执行过渡效果

5. 简写

transition可以同时设置过渡相关的所有属性，只有一个次序要求，如果要写延迟，第一个时间是过渡时间，第二个是延迟时间

米兔练习：

css代码：

.box1{
    height: 152px;
    width: 75px;
    margin: 0 auto;
    background-image:url(../example/mitu.png);
background-position: 0 0;
transition: .3s steps(3);
}
.box1:hover{
    background-position: -225px 0;
}

html代码：

 <div class="box1">div>

米兔图片

效果实现：实现行走的状态

动画

动画和过渡类似，都是可以实现动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果

设置动画效果，必须先要设置一个关键帧（一幅图片就是一帧），关键帧设置了动画执行的每一个步骤

关键帧格式：

@keyframes text/*关键帧名（可以自己起）*/ 
{
    /*from表示动画的开始位置,也可以使用0%*/
    from{
    }
    /*to表示动画的结束位置,也可以使用100%*/
    to{
    }
}

关键帧属性

1. animation-name:要对当前元素生效的关键帧名字

2. animation-duration: 动画执行时间

3. animation-delay:动画延迟

4. animation-timing-function: 动画时序函数

5. animation-iteration-count: 动画执行次数，其中填写数字表示重复次数，infinite表示无限执行

6. animation-direction: 指定动画运行方向

可选值：

• normal：默认值，从from向to执行
• reverse：反向执行，从to向from执行
• alternate：从from到to，重复执行动画时，反向执行，去的时候从from向to，回来时to向from
• alternate-reverse：从to到from，重复执行动画时，反向执行

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

可选值：

• running：默认值，表示动画运行
• paused：动画暂停

8. animation-fill-mode：动画的填充模式

可选值：

• none：默认值，动画执行完毕，元素回到初始位置（不是from的位置，是元素本身的初始位置）
• forwards：动画执行完毕，元素会停止在结束的位置（to的位置）
• backwards：动画延迟等待时，元素就会处在开始时间
• both：结合了forwards和backwards

例如：

.box2{
    background-color: #bfa;
  /*设置box2的动画*/
  animation-name: text;
  /*动画执行时间*/
  animation-duration: 2s;
  /*动画执行方向*/
animation-direction: normal;
/*动画执行状态*/
animation-play-state: running;
/*动画填充模式*/
animation-fill-mode: forwards;
}

米兔动画：

效果：米兔是不断的在行走的

其中动画也可以分段进行，例如：

@keyframes trump {
    from{
        background-position: 0 0;
    }
    50%{
background-position: -600px 0;
 }
75%{
    background-position: 0px -105px;
}
    to{
        background-position: -600px -105px;
    }
    
}

变形平移

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

可选值：

• translateX():元素沿x轴方向平移
• translateY():元素沿y轴方向平移
• translateZ():元素沿z轴方向平移

注意：平移元素要是使用百分比，则百分比是相对于自身来计算的
例如：元素宽度为100px，设置transform:translateX（50%）；则元素向右移动50px

设置元素垂直居中：

 transform: translateX(-50%);
 transform: translateY(-50%);

Z轴平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离
距离越大，元素离人越近，z轴平移属于立体效果，近大远小，默认情况下网页不支持透视，如果我们需要看见效果，我们必须设置网页的视距。

例如：

旋转

通过旋转沿着x、y或z轴指定的角度旋转

transform属性（变形平移也用的transform属性）
可选值：

• rotateX()：沿X轴旋转
• rotateY()：沿y轴旋转
• rotateZ()：沿z轴旋转

例如：

transform: rotatex(45deg);
/*deg表示角度*/
transform: rotatex(.5turn);
/*turn表示圈，.25turn表示四分之一圈*/

backface-visiblity属性：是否显示元素的背面

缩放

依旧使用transform属性
可选值：

• scaleX（）：对水平进行放大缩小，括号内可写数字，数字大于一表示放大，小于一表示缩小。
• scaleY（）：对垂直进行放大缩小
• scale（）：对水平、垂直同时放大缩小

例如: