簡單講一講css3的動畫屬性，transition，transform和animation
一、transition 過渡
transition 是乙個簡寫屬性，可擴充套件為
1.transition-property屬性，設定過渡效果的屬性名稱
值可為：none（沒有屬性有效果）|| all（所有屬性有效果）|| property（自定義屬性名稱）
2.transition-duration屬性，設定效果持續時間
3.transition-timing-function屬性，設定效果的速度曲線
值可為：
linear，線性效果
ease-in，先慢後快
ease-out，先快後慢
ease-in-out，先慢後快再慢
cubic-bezier（n，n，n，n），某種速度函式
4.transition-delay屬性，設定延遲執行效果的時間
二、transform 變換
常見取值分為四塊，
translate類（偏移）
scale類（放大縮小）
rotate類（旋轉）
skew類（拉伸）
與之相關有乙個屬性，transform-origin，允許你改變被轉換元素的屬性
transition 常與 transform 組合使用，例子
.image
.image_top
.box:hover .image_bottom
讓div擁有名為box的class屬性，裡面擁有名為image和image_bottom的class屬性，則滑鼠移至該div，該會向左下角縮小，並且透明，最後消失，滑鼠移走，有會反向復原（向右上角放大，逐漸顯現）
注意：這裡ie低版本不支援opacity所以用filter相容（ie你懂得）
三、animation 動畫
animation 也是乙個簡述屬性，可拓展為
1.animation-name需要繫結到選擇器keyframe的名字
2.animation-duration，動畫時間
3.animation-timing-function，動畫速度曲線，所填值與transition的該屬性相同
4.animation-delay，動畫延遲執行
與之相關的有@keyframe屬性，簡單例子
.animation
@keyframes mymove
25%
50%
75%
100%
}
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...
CSS 3動畫介紹
原文 a beginner s introduction to css animation 譯文 乙個初學者對css動畫的介紹 譯者 dwqs 在這篇文章，我將向你介紹css動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...