css动画

css有几个容易混淆的属性：animation,transtion,translate,transform

• animation 动画
• transtion 过渡 让元素的变化以动画的形式呈现
• translate 移动 translate只是transform的一个属性值，即移动。
• transform 变换 对给定的元素旋转，缩放，平移或扭曲

一、transition 过渡

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔
transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

div{
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
}

• transition-property 指定应用过渡属性的名称(如background)。值可以为三种：none，all（默认），属性名称。
• transition-duration 过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
• transition-timing-function 描述动画中间值是怎样计算。
• transition-delay 开始作用之前需要等待的时间

---

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

.div1{
    width:10px;
    height:10px;
    transition: width 3s ease,height 2s ease-in;
}
.div1:hover{
    width:50px;
    height:30px;
}

二、transform 转换

transform属性允许旋转，缩放，倾斜或平移，给定元素，还可以修改元素的坐标空间实现。
多个属性可以连着写。

• rotate(x,y) 旋转(角度)
• scale(x,y) 缩放(倍数)
• skew(x,y) 倾斜(角度)
• translate(x,y) 平移(多少长度、宽度)
• matrix(n1,n2,n3,n4,n5,n6) 修改坐标空间

transform:rotate(90deg,90deg);
transform:rotateX(90deg); 
transform:rotateY(90deg); 

transform:translate(10px,40px);
transform:translateX(10px);
transform:translateY(10px);
transform:translate(50%,50%);
transform:translateX(10%);
transform:translateY(10%);

transform:skew(0deg,0deg);
transform:skewX(90deg);
transform:skewY(90deg);

transform:scale(0.5);

transform:matrix(1,10,1,10,1,10);;

三、animation动画

animation属性用来指定一组或多组动画，每组之间用逗号相隔。
animation的css属性是 name， duration， animation-timing-function， delay， animation-iteration-count， animation-direction的缩写。

div{
    animation: [name] [duration] [animation-timing-function] [delay] [animation-iteration-count] [animation-direction];
}

• name 动画名称
• duration 动画持续时间
• animation-timing-function 动画的速度曲线
• delay 动画开始之前的延迟时间
• animation-iteration-count 动画播放次数 n|infinite;
• animation-direction 动画的方向 normal|alternate

1. animation-timing-function

动画的速度曲线的值

• linear 动画从头到尾的速度是相同的。
• ease 默认。动画以低速开始，然后加快，在结束前变慢。
• ease-in 动画以低速开始。
• ease-out 动画以低速结束。
• ease-in-out 动画以低速开始和结束。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

2. animation-iteration-count

动画播放次数的值有两种：number 次数、infinite 无数次

animation-iteration-count: n|infinite;

3. animation-direction

动画方向有两种，normal（默认）正常方向，alternate 轮流反向

animation-direction: normal|alternate;

4. @keyframes

通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。

@keyframes name{
    from{
        width:0;
    }
    50%{
        width:20px;
        height:100px !important; /** 被忽略 **/
    }
    to{
        width:0px;
    }
}

其中name为动画系列名称，from相当于0%，to相当于100%。有!important的属性会被忽略