CSS3动画

渐变

background: linear-gradient(to right/left/top/bottom, red , blue); /* 标准的语法 */

//使用角度
 background: linear-gradient(180deg, red, blue);

过渡和动画

transition: //过度

div{
   transition: 1s height, 1s 1s width;
}
div:hover{
    width:100px;
    height:100px;
}

• linear：匀速
• ease-in：加速
• ease-out：减速
• ubic-bezier函数：自定义速度模式

transition: 1s height cubic-bezier(.83,.97,.05,1.44);

复杂动画

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
div:hover {
  animation: 1s rainbow;
}

第三参数

• infinite：无限循环
• 数字：说明动画执行多少次
• forwards：动画结束后保持在结束状态
• backwards：让动画回到第一帧的状态

变形

transform：//变形

//旋转
transform:rotate(30deg);
rotateX（）
rotateY（）
rotateZ（）

//改变旋转中心
transform:rotate(30deg); transform-origin: 0% 0%;

//使元素平移
transform:translate(x,y);

//缩放元素
transform:scale(2, 0.5);

//扭曲元素
transform:skew(10deg, 20deg);

3D

transform: perspective( 600px ) //激活3D效果
设置得值越小，离我们视角越近

transform: perspective( 600px )