前幾天看到一個企業招聘的動畫覺得很炫，里面有個企業介紹的文字是用飛入的效果做出來的，今天嘗試了寫了一下，感覺還不錯~\(≧▽≦)/~啦啦啦
下面來看我做的動態效果：
其實上面的效果很簡單的，我的截圖軟件有問題，所以不是很清晰，但是大概的效果出現了~~~屏幕顏色從紅變白是因為我把鼠標從頁面上移到截圖軟件上關閉截圖，不要被這個干擾~~~~
一、頁面的主體布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>左右淡入的企業介紹</title> <link type="text/css" rel="stylesheet" href="css/animate.css" /> </head> <body> <div class="company"> <h2 class="company_name">上海世茂集團企業招聘</h2> <h5 class="company_introduce">世茂集團，是以房地產開發為主的國際化企業集群，房地產界領袖企業之一。</h5> </div> </body> </html>
上面就不用說了吧~~~~就四句話布局就完成了~~~我實在太懶了，一個多余的美觀性布局我都不願意寫QAQ，最直接的代碼是為了方便我以后復制。
二、CSS樣式（主要是CSS3）
body{
overflow: hidden; /*此處需要設置溢出隱藏，否則文字起始位移超過頁面大小就會在頁面下方出現橫的滾動條*/
}
.company{
width: 400px;
margin: 0 auto;
border: 1px #999999 solid;
}
/*定義一個名字為lefteaseinAnimate動畫，實現從頁面的左邊淡入頁面效果*/
@keyframes lefteaseinAnimate{
0%{ transform: translateX(-2000px); opacity: 0;} /*在0%時設置文字在想X軸-2000px位移處（左邊），透明度為0，也就是看不見文字*/
100%{ transform: translateX(0px); opacity: 1;} /*在100%時設置文字在想X軸0px位移處，也就是原始布局的位置，透明度為1，也就是文字可以看見了*/
}
@-webkit-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes lefteaseinAnimate{
0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
.company_name{
animation: lefteaseinAnimate 1s ease 1; /*調用已定義好的動畫lefteaseinAnimate，全程運行時間1S，進入的速度曲線為ease，只播放一次*/
-webkit-animation: lefteaseinAnimate 1s ease 1;
-ms-animation: lefteaseinAnimate 1s ease 1;
-o-animation: lefteaseinAnimate 1s ease 1;
-moz-animation: lefteaseinAnimate 1s ease 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
/*定義一個名字為righteaseinAnimate動畫，實現從頁面的右邊淡入頁面效果*/
@keyframes righteaseinAnimate{
0%{ transform: translateX(2000px); opacity: 0;} /*在0%時設置文字在想X軸2000px位移處（右邊），透明度為0，也就是看不見文字*/
100%{ transform: translateX(0px); opacity: 1;} /*在100%時設置文字在想X軸0px位移處，也就是原始布局的位置，透明度為1，也就是文字可以看見了*/
}
@-webkit-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes righteaseinAnimate{
0%{ -webkit-transform: translateX(2000px); opacity: 0;}
100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
.company_introduce{
animation: righteaseinAnimate 1s ease 1; /*調用已定義好的動畫righteaseinAnimate，全程運行時間1S，進入的速度曲線為ease，只播放一次*/
-webkit-animation: righteaseinAnimate 1s ease 1;
-moz-animation: righteaseinAnimate 1s ease 1;
-ms-animation: righteaseinAnimate 1s ease 1;
-o-animation: righteaseinAnimate 1s ease 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
額，我覺得上面的很小兒科，注釋我也寫的很清楚，需要注意的是剛開始就要給body添加一個overflow: hidden; 設置溢出隱藏，否則文字起始位移超過頁面大小就會在頁面下方出現橫的滾動條，這個也是我最后才發現的小問題，一句話就解決了~~~~~