过渡效果，动画效果，变换效果

过渡效果的写法

-webkit-transition:all 5s ease-in 0s;

动画效果的写法：

h1 {
 -webkit-animation: cc 10s ease-in 0 infinite alternate;
}
 @-webkit-keyframes cc {
0% {color:red;}
20% {color:green;}
50%{color:yellow;}
75%{color:gray; }
100%{color:purple;}/*紫色*/
}

h1:hover{
 -webkit-animation-play-state:paused; 鼠标放上动画停止

}

动画和变换相结合

一：

img{
 -webkit-animation:yy 0.2s ease-in 0s infinite normal}
 @-webkit-keyframes yy{
  from{-webkit-transform:rotate(360deg)}
  to{
   -webkit-transform:rotate(0);
   }
  }

二：

h1{

width:300px;   /*定义了宽高就不会有下面的滚动条*/
 -webkit-animation:yy 0.5s ease-in 0 infinite alternate;
}
@-webkit-keyframes yy{
 from{
  -webkit-transform:translate(0,0);}
 to{-webkit-transform:translate(100px,100px);}
 }

-webkit-transform:scale(0.5,0.5); 小于1是缩小，大于1是扩大

-webkit-transform:rotate(45deg);   变换效果旋转45度