一些动画效果

过渡 transition
例：div1{width：10px； height:10px; transition:width 3s;或 transition :all 3s;可直接表示下面所有要变效果3s到达}
div1:hover{width:20px; height 20px;}表示当鼠标移到上面缓慢增长3s才会达到移上的效果.
过渡的延伸:
例:.animated{width:60px; height:40px; background:red; font-size:15px; -webkit-transition:-webkit-transform 1s,opacity 1s, background 1s, width 1s,height 1s, font-size 1s; -webkit-bordr-radius:5px;}
.animated:hover{-webkit-transform:rotate(360deg);opacity :1; background grey:width 90px;height 60px; font-size 30px;}
动画:@keyframes(用-webkit-animation引导调用,用@-webkit-keyframes name定义)
例:div1{width:30px; height:30px; -webkit-animation:name 7s;}
   @-webkit-keyframes name{from{background:red;} to{background:blue;}}/{0%{background:red} 50%{background:blue} 100%{background:grey}}
   动态变化颜色:
   例:div1:hover{-webkit-animation:1s name forwards;}
     @-webkit-keyframes name{0%{background:red} 50%{background:blue} 100%{background:grey}}
   心跳感觉:
   例:div1:hover{-webkit-animation:0.4s name infinite;}  
      @-webkit-keyframes name{from{-webkit-transform:none;} to{-webkit-tranform:scale(2);}}
   摇头摆尾:
   例:div1:hover{-webkit-animation:1.5s name infinite;}
     @-webkit-keyframes name{from{-webkit-transform:none} 25%{-webkit-transform:rotate(-30deg);} 50%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(30deg);}  
字体引用：@font-face
格式：@font-face{font-family:name; src:url(引用字体的路径.ttf)}
使用：div{font-family：name；}就可使用外部引用的字体了。