清除浮动，过渡，变形，动画

1.清除浮动

清除浮动的方法：
	1.给受到浮动影响的元素添加overflow:hidden - 因为overflow属性会触发 BFC
	BFC: block formatting context 块级格式化上下文 - 让元素强制按照块元素的规则进行排列
	2.在受到浮动影响的元素后面，添加一个空div，给空div添加样式：clear:both
	3.在浮动元素的父标签的伪元素选择器:after中清除浮动 - 类似于空div

 .box::after{
        content: "";
        display: block;
        clear: both;
    }

2.过渡属性

属性：

（1）transition-property 属性值：none，all，property。

（2）transition-duration 属性值：time。默认值为0，常用单位s，或者毫秒ms。

（3）transition-timing-function 属性值：linear，ease，ease-in, ease-out, ease-in-out，cubic-bezier(n,n,n,n,)。默认值为ease。

（4）transition-delay 属性值：time。默认值为0，常用单位s，或者毫秒ms。属性值可以为正数，负数和0.当设置负数时，过渡动作会从该时间点开始，之前的动作被截断。设置为正数时，过渡动作会延迟触发。

（5）transition复合属性 属性值：property, duration, timing-function，delay。各个参数必须按照顺序进行定义。

3.变形

属性：

（1）transform 属性值：none，transform-functions。

2D转换：

属性：

（1，平移）transform 属性值：translate（x-value ，y-value）。

（2.，缩放）transform 属性值：scale（x-axis，y-axis）。

（3，倾斜）transform 属性值：skew（x-angle，y-angle）。

（4，旋转）transform属性值：rotate（angle）。

（5，更改变换的中心点）transform 属性值x-axis，y-axis，z-axis。

x-axis取值left，center，right，length，%。
y-axis取值top，center，bottom，length，%。
z-axis取值length。

3D转换：

属性：

（1）transform：rotateX（a）围绕X轴旋转。transform：rotateY（a）围绕Y轴旋转。

（2）transform（向元素应用2或3d转换），transform-origin（允许改变被转换元素的位置），transform-style（规定被箱套元素如何在3d空间中显示），perspective（规定3d元素的透视效果）perspective-origin（规定3d元素的底部位置），backface-visibility（定义元素在不面对屏幕时是否可见）。

动画：

@keyframes animationname{
   keyframes-selector{css-styles}
}

属性

（1）animation-name属性值keyframename, none。

（2）animation-duration属性值time。属性初始值为0，适用于所有块元素和行内块元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负值时，则被视为0。

（3）animation-timing-function属性值value。默认属性值为ease，适用于所有块元素和行内元素。另外还包括linear，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n,)。

（4）animation-delay属性值time。适用于所有块元素和行内块元素。time参数是以秒（s）或者毫秒（ms）默认值为0。

（5）animation-iteration-count属性值number，infinite。初始值为1。

（6）animation-direction属性值normal，alternate。初始值为normal，适用于所有的块级元素和行内块元素。该属性包括两个值，默认值normal表示动画每次都会正常显示，如果属性值是alternate，则动画会在奇数次数（1,3,5等）正常播放，而在偶数次数（2，4，6等）逆向播放。

（7）animation 属性值animation-name  ,animation-duration , animation-timing-function , animation-delay  ,animation-iteration-count  ,animation-direction。使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。