css过渡和动画初学



CSS3 过渡

    1.transition 简写属性，用于在一个属性中设置四个过渡属性。
 
    2.transition-property 规定应用过渡的 CSS 属性的名称。
 
    3.transition-duration 定义过渡效果花费的时间。默认是 0。

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

    5.transition-delay 规定过渡效果何时开始。默认是 0。
 
CSS3 动画

    1.@keyframes 规定动画。
 
    2.animation 所有动画属性的简写属性，除了 animation-play-state 属性。
 
    3.animation-name 规定 @keyframes 动画的名称。

    4.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

    5.animation-timing-function 规定动画的速度曲线。默认是 "ease"。

    6.animation-delay 规定动画何时开始。默认是 0。

    7.animation-iteration-count 规定动画被播放的次数。默认是 1。

    8.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
 
    9.animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
 
    10.animation-fill-mode 规定对象动画时间之外的状态。

总结 ：
####1.通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。（要实现这一点，我们需要规定效果添加到哪个CSS属性上以及效果时长 ）


2.通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。（要实现这一效果，我们需要了解@keyframes 规则，用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。）