之前的文章《手把手教你使用css給文字添加火焰效果（代碼詳解）》中，給大家介紹了怎么使用css給文字添加火焰效果。下面本篇文章給大家介紹怎么使用css3給文字添加動畫效果，我們一起看看怎么做。

在這類網站中能看到，無論是文字還是圖片，都隨著規(guī)定時間的而變化。css3的主鍵強大原理很簡單，主要用到css中animation屬性，文字實現動畫效果給大家看看。

代碼步驟

1、首先使用html框架。

創(chuàng)建新一個文檔，寫代碼先用<div class="animate box">這串代碼。

<div class="animate box"></div>

2、目前大體的框架已經寫好，<div>標簽。接下來向其中添加文字代碼。將代碼放在<span>中，文本中隨意寫什么都可以，我寫了是“css3實現簡單的文字動畫效果”

<div class="animate box"> <span>css3實現簡單的文字動畫效果</span> </div>

ok,html代碼大功告成

3、css3實現最核心的部分：CSS設置動畫及字體樣式。

animate屬性使用將動畫與div元素綁定，以像素計。當為元素定義animate屬性時，其子元素會獲得透視效果，而不是元素本身。下面給大家怎么寫代碼，首先在head標簽之間加入<style type="text/css"><style>這串代碼然后在style標簽中輸入文本的字體大小、外邊距、布局（設置元素上寬度和高度）代碼示例。

.animate {   font-size: 40px;   margin: 100px 0 0; }   .animate span {   display: inline-block; }

4、box盒子

box盒子模型指是：在網頁上直觀地布局元素，每個框都有一個內容區(qū)域以及可選的周圍邊距，邊距和邊框。下面給大家怎么寫代碼，以上head標簽之間加入<style type="text/css"><style>串代碼的方法一樣，style標簽中輸入文本的顏色、不透明、偏移，代碼示例。

.box span {   color: #fff;   opacity: 0;   transform: translate(-150px, 0) scale(.5);   animation: leftRight 1s forwards; }

5、把盒子animation添加@keyframes ，因為這是div元素勻速移動，代碼示例。

@keyframes leftRight {   40% {     transform: translate(30px, 0) scale(.7);     opacity: 1;     color: #000;   }   60% {     color: #fff;   }   80% {     transform: translate(0) scale(2);     opacity: 0;   }   100% {     transform: translate(0) scale(1);     opacity: 1;   }

ok,css大功告成

【完】

推薦學習：CSS3視頻教程