CSS进阶七：transition，transform，animation

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-in
ease-out
ease-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度 -45deg
translate(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: hidden
rotate(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-in
ease-out
ease-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>