CSS入门篇19.动画与变形

动画：

使用css技术来控制页面元素的css属性的变化

优势：

不需要js也能写，比较流畅，由浏览器去执行动画，减少代码量，性能比较高

1. 过渡：（transtion）同时设置过渡相关的所有熟悉

只有一个要求，两个数值时，第一个是过渡时间，第二个是延迟时间

理解

• 通过过渡可以指定一个属性发生变化时的切换方式，平滑的过渡
  • 只有两帧
  • 一次性，不能循环
  • 在某种条件下触发，如：hover、active、focus

属性：

Transtion-property：（必填）指定过渡的属性（宽，高，颜色等，用，隔开）

可选值：

None 无效果

All （默认）所有属性都参与过渡

Property 自定义过渡属性，用逗号隔开

注意：

所有数值类型的属性，都可以进行过渡。

从一个有效地的数值向另一个有效地数值过渡

Transtion-duration：（必填）指定过度的时间（s、ms）

Transtion-delay：指定过渡的延迟时间（s、ms）

Transtion-timing-function：指定过渡方式

可选值：

Ease （默认）慢-快-慢

Ease-in 慢--快

Ease-out 快--慢

Ease-in-out 以慢速结束和开始的过渡

Linear 匀速运动

Steps（） 分布执行过渡效果

Cublic-bezier（n，n，n，n）0--1的数值

1. 动画

a设置关键帧 @keyframes

b命名 move

第一种写法：

1设置关键帧

@keyframes move{

Form{

执行前

}

To{

执行后

}

}

2调用关键帧

1. Animation-nave：（必填）执行动画的名字
2. Animation-duration：（必填）执行动画的时间
3. Animatio-delay：动画的延迟时间
4. Animation-iteration--count：动画的执行次数（infinnte：无限执行）
5. Animation--timing-function：指定动画的方式

可选值：

Ease （默认）慢-快-慢

Ease-in 慢--快

Ease-out 快--慢

Ease-in-out 以慢速结束和开始的过渡

Linear 匀速运动

Steps（） 分布执行过渡效果

Cublic-bezier（n，n，n，n）0--1的数值

1. Animation-direction：指定轮流反向播放动画

可选值：

Nomal（默认）

Alternate 设置动画从from向to

1. Animatio-fill-mode：forwards指定动画结束停留的位置
2. Animatio-play-state：paused  指定动画暂停
3. Animation：简写

第二种写法：

1设置关键帧

@keyframes move{

0%{

执行前

}

100%{

执行后

}

}

注意：

帧的顺序可以更改，不管顺序的事；初始帧和结尾帧的值不写，默认是元素额的初始值

可以同时设置关键帧，用逗号隔开

1. 变形2D

变形属性：transform

可选值：

位移：Translate（0，0）

不改变其他元素

位移的参考点是元素的左上角

对行内元素没有效果

旋转：rotate（xxdeg）正顺负逆

默认围绕元素中心点旋转

默认单位deg

缩放：scale（默认1）

倾斜：skew（xxdeg）

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

1. 变形3D

变形属性：transform-style：preserve-3d