css渐变、过渡、转换、动画

CSS3渐变的分类

线性渐变（Linear Gradient）- 向下/向上/向左/向右/对角方向

径向渐变（radial-gradient）- 由它们的中心定义

2、从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad { 

height: 200px; background-image: linear-gradient(to right, red , yellow);

}

CSS3 径向渐变

1. 设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#grad { background-image: radial-gradient(circle, red, yellow, green); }

过渡属性

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。匀速linear默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

translate() 方法

ranslate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

rotate值（30deg）元素顺时针旋转30度。

 transform-origin: right top; 设置旋转轴心

scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

skew() 方法

skewX(<angle>);表示只在X轴(水平方向)倾斜。

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

1. 居于与CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3