css3动画效果的使用，animation与transition用法介绍

css3里面一共有2种动画分别为animation和transition
animation动画属性有8个分别如下：
（1）animation-name：动画名称
（2）animation-duration：动画所需要的时间单位（s）
（3）animation-timing-function：动画效果
  过渡函数，有如下几种：
  liner ：匀速
  ease-in：减速
  ease-out：加速
  ease-in-out：先加速再减速
  cubic-bezier：三次贝塞尔曲线
（4）animation-delay：在开始执行动画时需要等待的时间
（5）animation-iteration-count：定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放
（6）animation-direction：默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放
（7）animation-state：默认为running，播放，paused，暂停
（8）animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。

animation用法

.box{
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        animation: qjj 4s ease 1s infinite alternate ;
    }
    @keyframes qjj{
        from{
           width: 100px;
           height: 100px;
        }to{
           width: 300px;
           height: 200px;
           margin: 50px;
           border-radius: 50%;
        }
    }
   /*第二种方法*/
    @keyframes qjj{
	 0%{ width: 200px; }
     20%{ width: 200px; }
     40%{width: 200px; }
     60%{ width: 200px; }
     100%{ width: 200px; }
	}

transition动画属性4个：
 (1)  transition-property: 定义要过渡的css属性
 (2)  transition-duration: 定义动画所在持续的时间
 (3)  transition-timing-function:定义动画运动曲线(参数和transition一样)
 (4)  transition-delay:定义动画延迟时间

transition基本用法
transition通常和hover等事件配合使用，由事件触发

 .box{
        width: 200px;
        height: 200px;
        background: yellowgreen;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        transition: all 2s linear 2s;
    }

    .box:hover{
        width: 300px;
        height: 300px;
        background: yellow;
        transform: rotateZ(60deg);
       
    }

transition和animation的主要区别
1.transition不能立即执行，animation不能用事件触发;
2.trasition不可以设定循环次数
transition的优点在于简单易用，animation功能比它强大很多，但是占用的资源自然也多，如果追求复杂更自由的动画，建议使用animation