2017-05-03

css3 动画

三个概念

1.变形属性transform
2.动画属性transition
3.带keyframes的动画属性 animate

1.变形属性transform

transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)  // translate(x,y)水平方向和垂直方向同时移动
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)   // scale(x,y)使元素水平方向和垂直方向同时缩放
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(90deg)   // 旋转
transform: skewX(30deg)     // skew(x,y)使元素在水平和垂直方向同时扭曲
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform中使用多个属性时却需要有空格隔开： transform: translateX(10px) rotate(10deg) translateY(5px)

2.transition动画

语法
transition: property duration timing-function delay;

规定设置过渡效果的 CSS 属性的名称 none|all|property;
规定完成过渡效果需要多少秒或毫秒
规定速度效果的速度曲线
定义过渡效果何时开始

用法：transition: background 0.2s ease-in-out .1s;

3.animation动画

制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。

语法：
animation: name duration timing-function delay iteration-count direction;

规定需要绑定到选择器的 keyframe 名称
规定完成动画所花费的时间，以秒或毫秒计
规定动画的速度曲线
规定在动画开始之前的延迟
规定动画应该播放的次数 infinite无限
规定是否应该轮流反向播放动画 normal正常播放 alternate反向播放

<style> 
    div {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s linear 2s infinite alternate;
    }

    @keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }
</style>