一、平移動畫(huà)有關的(de)CSS3屬性以及相關的(de)屬性描述
1、transition-property：是用(yòng)來(lái)指定當元素其中一個(gè)屬性改變時(shí)執行transition效果（例如：長(cháng)度，寬度，顔色等）。
2、transition-duration：是用(yòng)來(lái)指定元素轉換過程的(de)持續時(shí)間（通(tōng)過設置元素轉換過程持續的(de)時(shí)間來(lái)實現動态效果，否則效果會變的(de)很生硬）。
3、transition-timing-function：允許元素根據時(shí)間的(de)推進去改變屬性值的(de)變換速率（例如：先快(kuài)後慢(màn)，先慢(màn)後快(kuài)，勻速變化(huà)等等）。
4、transition-delay：是用(yòng)來(lái)指定一個(gè)動畫(huà)開始執行的(de)時(shí)間，也(yě)就是說當改變元素屬性值後多(duō)長(cháng)時(shí)間開始執行transition效果。
先來(lái)三張效果圖，由于是一個(gè)動态的(de)過程，這(zhè)裏隻發三張動态瞬間圖片：
二、效果圖
圖片左側的(de)文字還(hái)沒有進入
三、示例代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><link href="css/main.css" rel="stylesheet" type="text/css"></head><body><figure class="test1"><img src="img/dengfuru3.jpg" class="test1-img"><figcaption><h2><font color="white">鄧福如</font></h2><p>《如果有如果》</p><p>《前面路口停》</p><p>《鄧大(dà)福是一隻貓》</p><p>《Nothing On You》</p></figcaption></figure></body></html>
/*清原有的(de)默認樣式*/body,figure,figcaption,h2,h3,p{margin: 0;padding: 0;}</p> <p>/*設置圖片樣式*/.test1-img{width: 50%;height:10%;overflow: hidden;margin-left:250px;}</p> <p>figure{position: relative;overflow: hidden;/*使用(yòng)overflow屬性設置成hidden，圖片超出容器的(de)部分(fēn)就會自動隐藏*/width: 100%;float: left;}</p> <p>figcaption{position: absolute;top:0;left: 0;}</p> <p>.test1{background-color: #2F0000;}</p> <p>.test1 figcaption {margin: 20px;}</p> <p>/*對(duì)test1的(de)figcaption下(xià)面的(de)p标簽進行樣式設計*/.test1 figcaption p{background-color: #FFF;color: #333;font-family: 微軟雅黑(hēi);font-weight: 500;letter-spacing: 1px;margin-top: 10px;text-align: center;}</p> <p>/*給figure下(xià)面的(de)所有的(de)p标簽加上動畫(huà)延時(shí)效果*/figure figcaption p{transition: transform 0.35s;}</p> <p>/*将test1裏面的(de)文字内容移出頁面*/.test1 figcaption p{transform: translate(-400px,0px);}</p> <p>/*當鼠标滑過外部容器figure的(de)時(shí)候改變p标簽和(hé)h2标簽的(de)位置*/.test1:hover figcaption p{transform: translate(0px,0px);}</p> <p>/*爲了(le)實現逐個(gè)出現的(de)效果，就要單獨給每一個(gè)p标簽加上延時(shí),給第一個(gè)p标簽加延時(shí)，每個(gè)P标簽的(de)延時(shí)長(cháng)短不同就決定了(le)他(tā)們是先後進入頁面的(de)*/.test1 figcaption p:nth-of-type(1){transition-delay: 0.05s;/*當鼠标放在圖片上0.05秒以後開始向右移動進入頁面*/}</p> <p>/*爲了(le)實現逐個(gè)出現的(de)效果，就要單獨給每一個(gè)p标簽加上延時(shí),給第二個(gè)p标簽加延時(shí)*/.test1 figcaption p:nth-of-type(2){transition-delay: 0.10s;/*當鼠标放在圖片上0.10秒以後開始向右移動進入頁面*/}</p> <p>/*爲了(le)實現逐個(gè)出現的(de)效果，就要單獨給每一個(gè)p标簽加上延時(shí),給第三個(gè)p标簽加延時(shí)*/.test1 figcaption p:nth-of-type(3){transition-delay: 0.15s;/*當鼠标放在圖片上0.15秒以後開始向右移動進入頁面*/}</p> <p>/*爲了(le)實現逐個(gè)出現的(de)效果，就要單獨給每一個(gè)p标簽加上延時(shí),給第四個(gè)p标簽加延時(shí)*/.test1 figcaption p:nth-of-type(4){transition-delay: 0.2s;/*當鼠标放在圖片上0.2秒以後開始向右移動進入頁面*/}
