过渡效果的写法
-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度
