css动画的基本操作

过渡动画

一、transition(过渡：标签从一种状态变为另一种状态)

数值属性：width,height,padding,margin

二、内容隐藏和显示

1、display(彻底隐藏)
display:none;隐藏
display:block/inline/inline-block/flex;显示
2、opacity（改变透明度）
opacity:0;隐藏（透明度为0，但依然存在可以点击）
opacity:1;显示
3、transform（缩放）
transform:scale(0.5,0.5); 缩小
transform:scale(1,1); 正常状态
transform ：rotate x rotate y rotate z( xx deg)；
(degree度，学位证)
transform-origin:bottom center;靠下居中
(origin原点)
backface-visibility:hidden;标签背部不可见
transform-style:preserve-3d;让子标签旋转效果为3D

三、帧动画（一秒24帧）

@keyframes roateAni{
	0%{
	transform:rotate(0deg);/opacity:0;
	}
	100%{
	transform:rotate(360deg);/opacity:1;
	}
 }

.box{
 animation:roateAni 0.5s 2;   #  2=>两次
}

infinite 无限次
linear infinite 匀速