CSS3，旋转rotate，动画animation

1.旋转rotate

-- 可以让元素在2维平面顺时针或者逆时针旋转
1.语法：
	 transform:rotate(度数)
2.重点：
	- 度数的单位是deg	举个例子：rotate(45deg)
	- 角度为正，顺时针，为负，逆时针
	- 默认旋转的中心点是元素的中心点

2.转换中心点transform-origin

-- 设置元素转换的中心点
1.语法：
	transform-origin:x y
2.重点：
	- 后面的参数x和y用空格隔开
	- x,y默认转换的中心点是元素的中心点(50%,50%)
	- 还可以给x,y设置像素或者方位名词(top,bottom,left,right,center)

3.缩放scale

-- 只要给元素添加了这个属性就能控制它放大还是缩小
1.语法：
	transform:scale(x,y)
2.注意：
	- x,y为逗号分隔
	- transform:scale(1,1):宽和高都放大一倍，相对于没有放大
	- transform:scale(2,2):宽和高都放大二倍
	- transform:scale(2):只写一个参数，相当于sacle(2,2)
	- transfrom:scale(0.5,0.5):缩小
	- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

4.2d转换综合写法

注意：
	- 同时使用多个转换，其格式为：transform：translate()rotate()....等
	- 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
	- 当我们同时有位移和其他属性时，记得将位移放到最前面。

5.动画

5.1.动画的基本使用

-- 动作动画分为两步：
	(1).先定义动画
	(2).再使用动画
-- 1.用keyframes定义动画(类似定义类选择器)
	@keyframes	动画名称{
		0%{
			width:100px
		}
		100%{
			width:200px
		}
	}
--  动画序列
	- 0%是动画开始，100%是动画完成
	- @keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。
	- 动画是使元素从一种样式逐渐变为另一种样式的效果，可以改变任意多的样式，任意多次。
	- 用百分比规定变化发生的事件，或用关键词”form“和”to“等同于0%和100%。

5.2.动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function	速度曲线，默认是ease
animation-delay	何时开始，默认是0
animation-iteration-count	被播放的次数，默认是1，无限是infinite
animation-direction	是否在下一周期逆向播放，默认是normal，alternate逆向播放
animation-play-state	正在运行或暂停，默认是running，还有”paused“
animation-fill-mode	结束后的状态，保持forwards/回到起始backwards

5.3.动画简写属性

-- animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者动画结束状态
	举个例子：animation：myfirst 5s linear 2s infinite alternate
	- 简写属性里面不包括 animation-play-state
	- 暂停动画：animation-lpay-state：paused；经常如鼠标经过等其他配合使用
	- 想要动画走回来，而不是直接跳回来：animation-direction：alternate
	- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards

5.4.速度曲线

animation-timing-function：规定动画的速度曲线，默认是ease

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加速，结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量(步长)

来源：CSDN

作者：代罔

链接：https://blog.csdn.net/qq_41523392/article/details/104339177