3.29 动画模块和3D转换模块

四、动画模块

不同点:过渡必须人为的触发才会执行动画而动画不需要人为的触发
相同点:都是用来给元素添加动画效果的
animation-name: xx;:需要执行动画的名称为xx

@keyframes xx
{
    from/0%{  }
    to/100%{    }
}

创建一个名称为xx的动画,两种方法

1. 使用关键字from to相当于从0%-100%
2. 可以将0%-100%分成好多块执行动画

animation-duration: 时间;:动画持续时长

三要素:

1. 告诉系统需要执行哪个动画
2. 告诉系统我们需要自己创建一个名称叫做xx的动画
3. 告诉系统动画持续的时长

其他属性:

animation-timing-function: ease;:告诉系统动画运动的速度,默认值为ease
animation-delay: 时间;:告诉系统延迟多长时间再执行
animation-iteration-count: 次数;:告诉系统需要执行的动画的次数,默认值是1,infinite无限
animation-direction: normal/alternate;:告诉系统是否需要执行往返动画,默认值是normal,alternate为往返
animation-play-state: running/paused;:告诉系统动画是否要暂停,默认值是running
animation-fill-mode: none/forwards/backwards/both;:
none:不做任何改变
forwards:让元素结束状态时保留最后一帧的样式
backwards:让元素在等待状态时,显示第一帧的样式
both:让元素等待时显示第一帧的样式,结束时保留最后一帧的样式
连写:animation: name duration timing-function delay iteration-count direction;
连写的简写:``animation: name duration;`

五、3D转换模块

2D是一个平面只有宽度和高度,没有厚度
3D是一个立体,有宽度,高度,还有厚度
默认情况下所有元素都是呈2D展现的
和透视一样,想看到某个元素的3D效果,只需要给他的父元素设置一个transform-style: flat/preserve-3d;,默认值是flat 2D显示.

注意:

设置动画时,动画里的属性会覆盖前面的属性
把不变的属性写在前面,变化的属性写在后面

六、背景属性

1. 背景图片尺寸属性

背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小
不设置时默认图片
background-size: 宽度px 高度px;:具体像素
background-size: 宽度% 高度%;:百分比为当前元素的百分比
background-size: auto 高度;:宽度等比拉伸
background-size: 宽度 auto;:高度等比拉伸
background-size: cover;:等比拉伸,直到宽度和填满整个元素
background-size: contain;:等比拉伸,直到宽度或者高度填满整个元素为止

2. 背景图片定位区域

背景图片定位区域是专门用来指定背景图片从哪个区域开始,默认值为padding-box
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

3. 背景图片绘制区域

背景图片绘制区域是专门用来指定从哪个区域开始绘制背景的,默认情况下会从border区域开始绘制
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

4. 多重背景图片

多张背景图片之间用逗号隔开,建议在编写多重背景时按照属性分类拆开写,属性之间也用逗号隔开