css3 渐变/过渡/动画

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡

渐变类型：

1）线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向，默认情况下从上到下

语法：background: linear-gradient(direction, color-stop1, color-stop2, ...)

2）径向渐变（Radial Gradients）：由它们的中心定义

语法：background: radial-gradient(center, shape size, start-color, ..., last-color)

---

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

要实现这一点，必须规定两项内容：

1）指定要添加效果的CSS属性

2）指定效果的持续时间

transition 属性：简写属性，用于在一个属性中设置四个过渡属性

transition-property 属性：规定应用过渡的 CSS 属性的名称

transition-duration 属性：定义过渡效果花费的时间。默认是 0

transition-timing-function 属性：规定过渡效果的时间曲线。默认是 "ease"

transition-delay 属性：规定过渡效果何时开始。默认是 0

---

CSS3可以创建动画，取代许多网页动画图像、Flash动画和JavaScript

创建动画是通过逐步改变从一个CSS样式设定到另一个

在动画过程中，可以更改CSS样式的设定多次

指定的变化时发生时使用％，或关键字"from"和"to"，这与0％到100％相同

.box{animation :mymove  5s ;}

@keyframes mymove{ 

         0%   {top:0px;}

        25%  {top:200px;}

        50%  {top:100px;}

        75%  {top:200px;}

        100% {top:0px;}

}