定义动画效果

transition:; 需要事件触发

animation 动画 不需要事件触发，使用关键帧就可以执行

*1：定义动画*

@keyname name｛

from｛｝

to｛｝

｝

from{}起始位置

to{}终点位置

0%{}起始位置

25%{}过程1

...过程n

100%{}终点位置

*2: 调用动画*

综合写法: animation: 名字 运动时间 速度 延迟时间次数;

animation-name: mz2;关键帧名字动画名

animation-duration: 1s;关键帧时长总运动时间

animation-timing-function：step-start; steps()一步一跳状态

animation-delay: 3s;/关键帧延迟时间/

animation-iteration-count: infinite;运动次数 默认一次 infinite无限循环

animation-direction: ;运动方向

reverse 反向运动

lternate 单数次顺时针 偶数次 逆时针

alternate-reverse 单数次，逆时针，偶数次 顺时针

animation-timing-function: ;运动使用的类型（加速，减速，贝塞尔曲线）

翻转背面不见

backface-visibility: 背面不可见;

visible可见

hidden 不可见

\1. 图面默认在前面展示（初始不需要设置背面不可见）

鼠标移上去，图片旋转到背面，设置背面不可见

2.文本默认在后面（初始旋转180deg）

鼠标移上去，文字旋转到正面 -->

变形

缩放：transform:scale(1)

1是不变，比1小就是缩小，大就是放大

不会影响布局

旋转：transform: rotatez(180deg)

默认是Z轴旋转 正值顺时针，负值逆时针

rotatex(180deg)

rotatey(180deg)

过渡延迟效果、

transition-delay：300ms

倾斜：

正值向左倾斜，负值向右倾斜

transform: skew(-30deg)

偏移量translate

参数1：X轴偏移量（正向右，负向左）

参数2：Y轴偏移量（正向下，负向上）

动画

书写格式：关键字 动画名称｛时间占比｛样式｝｝

@keyframes 自定义动画名称｛

0%｛｝

25%｛｝

50%｛｝

75%{}

100%{}｝

使用动画｛

animation：动画名称 动画时间 动画样式 动画次数｝

用animateCSS里面的动画，先引用

1、添加类名animated

2、把animate.css里面的动画名称

多个类名分隔符是空格

工程化的优点

1、解决层次结构选择问题

2、引入变量、混合器等新功能

变量的书写格式 $变量名：属性值；

@charset"UTF-8";编译中文文本

多行注释

/**

*

*/

创建混合器

@mixin f76（）｛｝

引用带参混合器

格式 @include 混合器名称（参数1 参数2...参数n）

@include f76（）

形参 形式参数：创建混合器添加的参数

实参 实际参数：使用混合器添加的参数

形参默认值：如果没有传入对应的实参 则试用默认值，反之用实参的值

实参（实际参数）：使用混合器添加的参数

实参和形参是一一对应的关系

行盒

display：inline

可替换元素 img、viedeo、audio

非可替换元素 文本类的元素

别区

。

word-break：

normal默认值 英文空格和标点符号，中文，按字和标定符号

break-all 可以按照字母断词

由于格式化后，每个标签在html独占一行因此两个行盒之间的回车，会在页面产生一个空格导致标签之间增加距离。解决方式：父元素font-size：0 由于font-size具有继承性，需要恢复子元素font-size

设置标签放大后的显示方式

默认值：fill 默认值 只给一个值 等比例缩放，给两个值按照给定值显示

contain 当宽或者高放大到给定值，另一个值则不再放大

conver 按照给定值进行放大，但超出部分不会显示

行内标签在垂直方向上盒模型上设置的值不占用实际尺寸

垂直方向上的margi、border、padding不占用布局空间

行盒的定位体系必定是常规流

浮动和绝对定位的盒子会自动变成块盒

行盒会在包含块中，避开浮动元素

vertical-align：调整行内元素的对齐方式

默认是基线对齐 baseline