【整理】原文：https://segmentfault.com/a/1190000007087701

?本人新手，國慶苦逼加無用班，那是我在夕陽下的奔跑嗎？閑來無聊整理以前學習的資料，關于廣告欄的效果制作，詳情觀看[這里][1]。其中用了一個作者自己寫的move.js插件也就是移動動畫完成（重點就是定時器setinterval如果有人有代碼歡迎送上）；另一個就是用jq完成，下面主要說說jquery的實現方法吧。

jquery實現的重點就是animate方法，這是[官網][2]。

> **定義和用法**
> animate() 方法執行 CSS 屬性集的自定義動畫。
> 該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
> **語法 1**
> `$(selector).animate(styles,speed,easing,callback)`

廢話少說，下面是詳細代碼：

dom結構：

1 <div class="dbmove" id="dbmove"></div> 2 <a href="javascript:void(0)" class="dbhide" id="dbhide"></a> 3 <a href="javascript:void(0)" class="dbshow" id="dbshow"></a> 4 css：（dbshow，dohide類似） 5 .dbmove { 6 background: url("db.png") no-repeat 0 0; 7 width: 0px; 8 height: 33px; 9 float: left; 10 } 11 jquery: 12 $(document).ready(function () { 13 $('#dbshow').click(function () { 14 $(this).hide(); 15 $('#dbmove').animate({width: 150}, 500, function () { 16 $('#dbhide').show(); 17 }) 18 }) 19 20 $('#dbhide').click(function () { 21 $(this).hide(); 22 $('#dbmove').animate({width: 0}, 500, function () { 23 $('#dbshow').show(); 24 }) 25 }) 26 })

?

![圖片描述][3]這個是圖片資源大家意淫一下效果吧，點擊展開，點擊收起。

**下面進入重點：CSS3動畫的實現？**
寫完了想用css實現一個這樣的功能，之后進行了簡單的百度和嘗試，代碼如下：

1 @-webkit-keyframes fadeInRight { 2 0% { 3 width: 0; 4 } 5 100% { 6 width: 150px; 7 } 8 9 } 10 .dbmove { 11 background: url("db.png") no-repeat 0 0; 12 width: 0px; 13 height: 33px; 14 float: left; 15 animation-name:fadeInRight;/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/ 16 animation-duration: 2s;/*動畫持續時間*/ 17 animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/ 18 animation-delay:1s;/*動畫延遲時間*/ 19 animation-iteration-count: 1;/*定義循環資料，infinite為無限次*/ 20 animation-direction: normal;/*定義動畫方式*/ 21 }

?

第一個想到的自然是keyframes動畫，以前也就聽過，并沒有寫過這樣的代碼。經過一段嘗試最終失敗，現在的效果是默認動畫執行一次但是不知道怎么用JS通過點擊控制，并且最終動畫會還原，不符合預想。希望有人看到來繼續完成吧，隨記！

最后附上：[JS動畫比CSS3動畫性能誰更好？][4]
[CSS3 動畫][5]

[1]: http://www.imooc.com/learn/22
[2]: http://api.jquery.com/animate/
[3]: /img/bVDTYJ
[4]: https://www.zhihu.com/question/33686030
[5]: http://www.w3school.com.cn/css3/css3_animation.asp

總結

以上是生活随笔為你收集整理的css3制作广告栏效果的疑问？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。