transition
元素样式过渡效果
transition-property
设置需要过渡css属性，默认为all；一般不需要设置
transition-property:width,color;
css属性要求
具有中间值的css属性（css样式值是数值或者可以转换成数值.width , color）
transition-duration
过渡效果持续时间
transition-duration: 2s, .5s 多个过渡时间使用逗号分隔， 通常配合控制多个过渡属性.
transition-delay
设置延迟执行时间
可以设置为负值
设置为-1时，前1秒没有过渡效果，后边的才会有过渡效果
transition-timing-function
过渡效果
可选值：
-
linear匀速过渡 -
ease缓进缓出 ease-inease-outease-in-out-
cublic-bezier(n,n,n,n)贝塞尔曲线
transition
简写
单个属性过渡
transition: CSS属性名1 过渡时间 过渡效果 过渡延迟时间
多个属性过渡
transition: CSS属性名1 过渡时间1 过渡效果1 过渡延迟时间1 , CSS属性名2 过渡时间2 过渡效果2 过渡延迟时间 2
过渡覆盖问题
transition: width 1s .3s linear， .2s
此时宽度的过渡变化 200毫秒，而不是3秒，同时过渡会立即执行，并不是延迟1秒执行。
实际浏览器是按以下方式处理的，
transition: width 1s linear .3s ease， all .2s 0s ease
单向过渡VS双向过渡
单向过渡
过渡样式设置在“样式结束值”位置（只有触发过渡时，会产生过渡效果）
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box:hover{
width: 200px;
transition-duration: 3s;
}
双向过渡
过渡样式设置在“样式开始值”位置（触发过渡，状态消失都会产生过渡效果）
.box{
width: 100px;
height: 100px;
background-color: red;
transition-duration: 3s;
}
.box:hover{
width: 200px;
}
隐式过渡
指定了字体大小的过渡，但是在firefox 和 chrome 中导致了宽高的“隐式过渡”
过渡事件 transitionend
var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", function(event) {
element.innerHTML = “过渡时间结束!";
}, false);
transform
元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜
- 元素变形，不会影响相邻兄弟元素的位置。
- 元素变形，元素不设置高度时，不会导致父元素高度的变化。
- 元素变形，只有在块元素中才生效。
- 元素变形，元素的文本及其后代元素都会变形。
可选参数：
scale(x, y)定义 2D 缩放转换，元素的x,y轴进行缩放转换scaleX(n)定义 2D 缩放转换，元素x轴进行缩放转换scaleY(n)定义 2D 缩放转换，元素y轴进行缩放转换skew（x-angle,y-angle）定义 2D 倾斜转换，沿着 X 和 Y 轴。skewX(angle)2D 倾斜转换，沿着 X 轴。（相当于Y轴做了一定角度的倾斜）skewY(angle)2D 倾斜转换，沿着 Y 轴。angle表示旋转的角度，单位是deg,逆时针45度 45deg;顺时针45度 -45degtranslate(x,y)2D 移动转换，沿着 X 和 Y 轴移动元素。translateX(n)2D 移动转换，沿着 X 轴移动元素。translateY(n)2D 移动转换，沿着 Y 轴移动元素。translateZ(n)3D 移动转换，沿着 Z 轴移动元素。x, y, n 表示移动的距离 (length) 。例如 200px
变换中心点对位移函数
translate()不其起作用位移过大会导致父元素出现滚动条，此时需对父元素设置
over-flow: hiddenrotate(angle)2D 旋转，沿Z轴旋转角度改变变换中心点的位置，可以实现不同的旋转效果
rotateX（angle）3D 旋转，沿X轴旋转角度,-
rotateY（angle）3D 旋转，沿Y轴旋转角度transform: scale(x, y)
每次进行变换都是根据最原始位置坐标系进行变换。
例如: 先设置rotate（45deg）图像会转45度， 再设置旋转45deg是没有效果的，因为已经旋转了45deg。
scale（）会使坐标系比例发生变换，其子元素的变换都会根据新的坐标系变换
skew（）倾斜之后会导致坐标系也会倾斜，其子元素的变换都会根据新的坐标系变换
rotate（）会使坐标系也旋转，其子元素的变换都会根据新的坐标系变换
transform-origin: x-axis y-axis z-axis;
变换中心点
x-axis。y-axis默认是center;z-axis默认是0
- x-axis 定义视图被置于 X 轴的何处。可能的值：
- left
- center
- right
- length
- %
- y-axis 定义视图被置于 Y 轴的何处。可能的值：
- top
- center
- bottom
- length
- %
backface-visibility
设置元素翻转180deg之后是否可见
可选参数：
-
visible背面是可见的。 -
hidden背面是不可见的。
perspective：number | none
景深(给当前元素的父元素设置),3D元素是如何查看透视图
-
number元素距离视图的距离，以像素计。 -
none默认值。与 0 相同。不设置透视。
perspective-origin:x-axis y-axis
景深中心点
参数说明
- x-axis 定义视图被置于 X 轴的何处。可能的值：
- left
- center
- right
- length
- %
- y-axis 定义视图被置于 Y 轴的何处。可能的值：
- top
- center
- bottom
- length
- %
- z-axis 定义视图被置于 Z 轴的何处。可能的值：
- length
transform-style
指定嵌套元素是怎样在三维空间中呈现
可选值：
flat（默认值） 子元素将不保留其 3D 位置。preserve-3d子元素将保留其 3D 位置。
animation
动画
@keyframes
定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
@keyframes mykeyframes {
from{
background-color: orange;
}
20%{
background-color: blue;
}
50%{
background-color: red;
transform: scale(.5);
}
to{
background-color: green;
transform: scale(2);
}
}
//from{} = 0%{}
//to{}=100%{}
0%, 90%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}
animation-name
.box{
width: 100px;
height: 100px;
animation-name: anim1;
animation-duration: 2s;
}
@keyframes anim1 {
from{
background-color: red;
}
10%{
background-color: green;
}
to{
background-color: blue;
}
}
animation-duration
动画持续时长
animation-delay
动画延迟时长
animation-iteration-count
规定动画播放次数
可选参数：
infinite无限次播放n指定播放次数
animation-direction
定义是否循环交替反向播放动画。
注意：如果动画被设置为只播放一次，该属性将不起作用
可选参数：
-
normal正常播放 -
Reverse反向播放 -
alternate动画下一次播放反向播放 -
alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 -
alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
animation-timing-function
指定动画速度曲线
-
linear匀速过渡 -
ease缓进缓出 ease-inease-outease-in-out-
cublic-bezier(n,n,n,n)贝塞尔曲线
animation-play-state
设置动画暂停、播放
可选参数：
paused动画暂停running动画播放
animation
所有动画属性的简写属性，除了 animation-play-state 属性
animation-fill-mode
设置样式以在动画不播放时应用元素
设置元素动画播放前显示的样式和播放结束后显示的样式
-
none默认值。无样式 -
forwards动画结束后，使用元素的结束属性值。 -
backwards使用元素的起始值。 -
both动画将遵循向前和向后的规则。
css中的计数器
counter-reset：name number
设置或重置一个计数器
-
name计数器名称 -
number计数器初始值,默认为0
参数：计数器名称
counter-increment： name number
-
name计数器名字 -
number每次的增量，默认为1
counter（name）/counters（name，"分隔符"）
显示计数结果
<style>
li{list-style:none;}
.father { padding-left: 20px; counter-reset: count; line-height: 1.6; color: #666; }
.son:before { content: counters(count, '-') '. ';
counter-increment: count;
font-family: arial black; }
</style>
</head>
<body>
<ul class="father">
<li class="son">我的爱好
<ul class="father">
<li class="son">爬山</li>
<li class="son">追剧</li>
<li class="son">旅游</li>
</ul>
</li>
<li class="son">我的偶像
<ul class="father">
<li class="son">王昱珩
<ul class="father">
<li class="son">最强大脑第二季选手</li>
<li class="son">最强大脑第五季水之队队长</li>
</ul>
</li>
<li class="son">胡歌</li>
<li class="son">陈默</li>
</ul>
</li>
<li class="son">web前端</li>
<li class="son">啦啦啦啦啦</li>
</ul>
