CSS属性总结（达内第一阶段）（三）-优快云博客

本文详细介绍了CSS3中的transition和animation属性，包括过渡的执行时间、延迟、执行方式等，以及transform属性的各种变换如translate、rotate和scale。同时提到了动画的关键帧、执行次数、播放状态等概念。

过渡	transition	过渡简写属性	最简执行时间就行，其他可不写	执行时间在前，延迟时间在后，其他没顺序
	transition-property	过渡名称	默认all，表示过渡所有可过渡属性
	transition-duration	过渡执行时间	必写属性，默认为秒
	transition-delay	过渡延迟时间	默认值0，单位秒
	transition-timing-function	过渡执行方式	默认值ease,常营值linear匀速
变换	transform	位移	translateX(50px)	x轴向右移动50px,正值向右，负值向左
			translateY(50px)	Y轴向下移动50px，正值向下，负值向上
			translate(50px,50px)	X轴向右移动50px，Y轴向下移动50px
			translate(50px)	如果只写一个值，默认为X轴
		旋转	rotateX(50deg)	元素围绕X轴旋转
			rotateY(50deg)	元素围绕Y轴旋转
			rotate(50deg)	元素围绕中心点Z轴旋转
		缩放	scale()	同时负责X轴与Y轴的缩放
			scaleX()	负责X轴的缩放
			scaleY()	负责Y轴的缩放
		扭曲	skewX(20deg)	X轴的扭曲
			skewY(20deg)	Y轴的扭曲
			skew(20deg,20deg)	XY轴一起扭曲
	transform-origin	切换基点	center默认值，可以使百分比、关键字	切换基点位置
动画	animation	动画简写属性	下面分属性的值都可以写	名称与执行时间必写
	animation-name	动画名称	自定义名称	要执行关键帧的名称，必须写
	animation-duration	执行时间	2s	动画要执行的时间，必须写，单位s
	animation-delay	延迟时间	2s	动画执行时要延迟的时间，单位s
	animation-play-state	播放状态	running	默认值，执行。。paused暂停
	animation-timing-function	执行方式	ease	动画的执行方式，linear匀速
	animation-iteration-count	执行次数	1	默认值。1没有单位 linfinite 无限次
	animation-fill-mode	停留位置	backwards	动画执行完毕的停留位置，默认值时初始位置 forwards,停留在执行完毕的位置
	animation-direction	执行次序	normal	执行动画的次序，默认时顺序执行 alternate 正向与反向交替