CSS3

注：根据MDN显示，许多CSS3新增属性都是尚在实验中的功能，使用前请务必参考好浏览器兼容性Can I Use，添加所需前缀。使用 CSS3动画可以实现各种绚丽的效果，主要靠想象力。

渐变色都有什么方式？

1. 线性渐变

background:linear-gradient(direction,color-stop1,....)
background:linear-gradient(to end-direction,color-stop1,....)
//对角
background:linear-gradient(to end-level end-vertical,color-stop1,....)
//角度
background:linear-gradient(angle,color-stop1 10% ,....)
//透明度 第二个点默认为50%位置
background:linear-gradient(angle,rgba(255,0,0,0),rgba(255,0,0,.5),rgba(255,0,0,1))
//重复线性渐变
background:repeating-linear-gradient(90deg,red 0%,blue 20%);

由于在不同浏览器兼容问题中direction的写法可能不同，所以推荐使用角度写法，下图为不同角度对应的线性方向

线性渐变角度

2. 径向渐变
   从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）
   位置是对角线

background:radial-gradient(center,shape size,color-stop,...)
//设置形状 cicle ellipse(默认形状)
background:radial-gradient(shape,color-stop1,...)
//尺寸大小关键字   closest-side:最近边  farthest-side:最远边  closest-corner:最近角  farthest-corner:最远角
background:radial-gradient:(size,color-stop,...)
//重复渐变
background:repeating-radial-gradient(size,color-stop)

什么是transform属性？

CSS中transform 属性允许你修改CSS可视化模型的坐标空间。通过transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。

1. 2D转换

//角度
transform:rotate();
//平移
transform:translate();
//缩放
tranform:scale(.5);
//斜切
transform：skew(0deg);

2. 3D转换

//角度
transform:rotate3d();
//平移
transform:translate3d();
//缩放
tranform:scale3d();
//改变转换元素的位置
transform-origin:x-axis y-axis z-axis;

什么是Transition属性？

过渡属性（Transition）：允许CSS的属性值在一定的时间区间内平滑过渡。
transition-property:none|all|property：检索或设置对象中参与过渡的属性 可写可不写
transition-duration:time：检索或设置对象过渡的持续时间 默认值是0
tansition-timing-function：检索或设置对象中过渡的动画类型
transition-delay:time：检索或设置对象延迟过渡时间
transition:property duration timing-function delay

什么是关键帧？

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。
写法：

@keyframes animationname{
    keyframes-selector{
        css-styles;
    }
}

为了让一个关键帧列表有效，它必须至少包含了对0%（或from）和100%（或to）即动画的开头帧和结束帧的定义。 如果都没有进行定义，那么整个@keyframes 是无效的，不能使用。
关键帧MDN

动画属性

• animation-name:keyframename|none：检索或设置对象所应用的动画名称
  keyframename:指定要绑定到选择器的关键帧的名称
  none:指定有没有动画（可用于覆盖从级联的动画）
• animation-duration:time：检索或设置动画的持续时间
  time：指定动画持续时间
• animation-timing-function：检索或设置对象动画的过渡类型
• animation-delay：检索或设置对象动画的延迟时间
• animation-iteration-count:infinite|number：检索或设置动画的循环次数
  infinite：无限次
• animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit：检索或设置对象动画在循环中是否反向运动
  normal：正常方向
  reverse：反方向运行
  alternate：动画先正常运行再反方向运行，并持续交替运行
  alternate-reverse：动画先反运行再正方向运行，并持续交替运行
• animation-fill-mode:none|forwards|backwards|both|initial|inherit：动画在不播放时（当动画完成或者当动画有延迟未开始播放时，要应用到元素的样式）
• animation-play-state:paused|running：指定动画是否正在运行或已暂停
• animation:name duration timing-function delay iteration-count direction fill-mode play-state

所有属性的基本写法：JSbin