公共课-css3转换和动画

一、转换

1、分类

旋转

平移

缩放和拉伸

扭曲

2、转换的属性

transform

3、层叠属性：z-index:x;

这个一定要配合定位使用

4、旋转

transform:rotate(度数);

度数：30deg，旋转30度，单位是deg

默认：顺时针旋转，围绕盒子正中心旋转

逆时针旋转：度数写成负数

设置旋转中心：

transform-origin: left top ; 以左上角为中心

5、平移

transform:translate(水平方向尺寸，垂直方向尺寸);

正的是正方向，负的就是负方向

6、缩放和拉伸

transform:scale(水平倍数，垂直倍数);

如果是负数会自动取绝对值

缩放是以盒子的中心缩放

7、扭曲

transform:skew(水平方向度数，垂直方向度数);

二、动画

css动画：让元素从一种效果变为另外一种效果（样式的变化）

属性：animation

1、动画的设置

（1）动画名称

animation-name: 自定义名称;

（2）动画的周期

animation-duration: x秒;

（3）动画的延迟

animation-delay: x秒;

（4）动画的速度曲线

animation-timing-function: ease;

默认是ease，快慢快

linear:匀速

（5）动画的次数

**animation-iteration-count: **x;

infinte:无限次

（6）综合设置

animation: 名称 周期 延迟 速度曲线 次数;

（7）动画暂停

animation-play-state: paused;

2、动画的创建

（1）from,to

@keyframes 动画名 {

	//开始

	from{

		属性:属性值；		

	}

	//结束

	to{

		属性:属性值；

	}

}

（2）百分比

@keyframes 动画名称{
    0%{}
    30%{}
    70%{}
    100%{}    
}