在這篇文章中主要是講如何通過css3實現平移動畫效果，在開始之前先給大家介紹一下與平移動畫有關的css3屬性以及相關的屬性描述。
一、transition-property：是用來指定當元素其中乙個屬性改變時執行transition效果(例如：長度，寬度，顏色等)。
二、transition-duration：是用來指定元素轉換過程的持續時間(通過設定元素轉換過程持續的時間來實現動態效果，否則效果會變的很生硬)。
三、transition-timing-function：允許元素根據時間的推進去改變屬性值的變換速率(例如：先快後慢，先慢後快，勻速變化等等)。
四、transition-delay：是用來指定乙個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果。
先來三張效果圖，由於是乙個動態的過程，這裡只發三張動態瞬間：
左側的文字還沒有進入
上的四行文字正在逐條進入
上四行文字完成動畫效果
html5全部**：
index
《如果有如果》
《前面路口停》
《鄧大福是乙隻貓》
《nothing on you》
css3樣式**：
/*清原有的預設樣式*/
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
/*設定樣式*/
.test1-img{
width: 50%;
height:10%;
overflow: hidden;
margin-left:250px;
figure{
position: relative;
overflow: hidden;/*使用overflow屬性設定成hidden，超出容器的部分就會自動隱藏*/
width: 100%;
float: left;
figcaption{
position: absolute;
top:0;
left: 0;
.test1{
background-color: #2f0000;
.test1 figcaption {
margin: 20px;
/*對test1的figcaption下面的p標籤進行樣式設計*/
.test1 figcaption p{
background-color: #fff;
color: #333;
font-family: 微軟雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
/*給figure下面的所有的p標籤加上動畫延時效果*/
figure figcaption p{
transition: transform 0.35s;
/*將test1裡面的文字內容移出頁面*/
.test1 figcaption p{
transform: translate(-400px,0px);
/*當滑鼠滑過外部容器figure的時候改變p標籤和h2標籤的位置*/
.test1:hover figcaption p{
transform: translate(0px,0px);
/*為了實現逐個出現的效果，就要單獨給每乙個p標籤加上延時,給第乙個p標籤加延時，每個p標籤的延時長短不同就決定了他們是先後進入頁面的*/
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;/*當滑鼠放在上0.05秒以後開始向右移動進入頁面*/
/*為了實現逐個出現的效果，就要單獨給每乙個p標籤加上延時,給第二個p標籤加延時*/
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.10s;/*當滑鼠放在上0.10秒以後開始向右移動進入頁面*/
/*為了實現逐個出現的效果，就要單獨給每乙個p標籤加上延時,給第三個p標籤加延時*/
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;/*當滑鼠放在上0.15秒以後開始向右移動進入頁面*/
/*為了實現逐個出現的效果，就要單獨給每乙個p標籤加上延時,給第四個p標籤加延時*/
.test1 figcaption p:nth-of-type(4){
transition-delay: 0.2s;/*當滑鼠放在上0.2秒以後開始向右移動進入頁面*/
css 平移到某個位置 CSS知識總結
本週學習了css布局 定位 動畫，方老師解答了很多之前學習中遇到的疑惑，點撥了css學習方法和思路，受益匪淺！根據html構建html樹 dom 根據css構建css樹 cssom 將兩棵樹合併形成渲染樹 render tree layout布局 文件流 盒模型 計算大小和位置 paint繪製 繪製...
css 平移到某個位置 CSS 的常用屬性速查表
要想寫出優美的 css 作品，想象力固然很重要，然而基礎也是不可忽略的。元素本身，p 類，p.class id，p id 後代，ul li 屬性，input type checkbox 相鄰元素，input label 全選，偽類，用於選擇特定狀態下的元素 hover 滑鼠懸浮狀態 focus 元素...
Position位置屬性 CSS3
學習筆記之position的使用 position常用屬性和區別 1 position relative 不脫離文件流 一般是設定給position absolute 的父層的 父層position relative 子層position absolute 的話,就是依照父層的邊界進行定位的,不然p...