css3 動畫總結

XiNGRZ 發布于2019-04-23 13:19 / 1833人閱讀

摘要：如果你做其他的動畫，或者動畫之類的，一定知道幀這個東西。這個是動畫的一個過程，電腦是根據幀，然后渲染得到的一個連續的動畫。規定完成動畫所花費的時間，以秒或毫秒計。就是播放一次停在最后一幀播放次數和播放完成之后保留的最后的轉態。

　　原來的時候寫過一個小程序，里面有一個播放背景音樂的按鈕（也是一個圓形的圖片），它是一直在旋轉的，當我們點擊這個按鈕的可以暫停或者播放背景音樂。當初的這個動畫，是同事自己寫的，我看到的時候以為是他在上面放了一個gif圖呢。但是沒有想到他是自己寫的一個動畫。早就想自己整理一下關于c3 動畫的一些信息了，今天就在這里小小的總結一下，然后也算是自己的一個小的筆記。

　　首先說c3動畫，就必須提到animation 這個就相當于咱們寫的background的一樣，是一個c3新增的屬性。這個就能寫動畫了。如果你做其他的動畫，或者flash動畫之類的，一定知道“幀”這個東西。這個是動畫的一個過程，電腦是根據幀，然后渲染得到的一個連續的動畫。看一小段代碼：

.dong{
         animation: myfirst 2s linear 0s infinite alternate;    
     }

這個就是我們寫c3動畫中經常用到的屬性。這種連寫的好處就是簡單，但是對于初學者，這個簡直就是噩夢，所以如果我們不熟練的話，可以一個一個的寫，雖然比較繁瑣，但是每個字段什么意思都是清晰可見的。

/**
             * animation-name    規定需要綁定到選擇器的 keyframe 名稱。。
             * animation-duration    規定完成動畫所花費的時間，以秒或毫秒計。
             * animation-timing-function    規定動畫的速度曲線。
             * animation-delay    規定在動畫開始之前的延遲。
             * animation-iteration-count    規定動畫應該播放的次數。
             * animation-direction    規定是否應該輪流反向播放動畫。
             * **/

這里附上一個鏈接地址，里面有各個屬性的屬性值。點這里

　　回到咱們上個問題，就是點擊這個按鈕的時候，需要將這個動畫暫停，然后再次點擊的時候開始這個動畫。這個時候就需要用到一個叫做“animation-play-state”的屬性了，他的屬性值我們可以設置為“paused”。當然了實際的生產中，我們肯定是會給這個屬性一個class類名的，然后通過控制這個class類名的添加和刪除，來控制這個動畫的暫停和開始。請看下面的一行css代碼：

.pause {
    animation-play-state: paused;
}

好了，到了這里差不多css3 的動畫就完了。下面附上一段我自己寫的小的demo，但是需要注意的是，這個demo不是我上面說的那個旋轉暫停的，但是這個有了更多的功能。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css3 動畫title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7         <style type="text/css">
 8             @keyframes myfirst{
 9                 from {
10                     background: red;
11                     left: 0px;
12                     top: 40px;
13                     border-radius: 0;
14                     transform:rotate(0deg);
15                 }
16                 to {
17                     background: blue;
18                     left: 300px;
19                     top: 200px;
20                     border-radius: 50%;
21                     transform:rotate(360deg);
22                 }
23             }
24             .dong{
25                 animation: myfirst 2s linear 0s infinite alternate;    
26             }
27             /**
28              * animation-name    規定需要綁定到選擇器的 keyframe 名稱。。
29              * animation-duration    規定完成動畫所花費的時間，以秒或毫秒計。
30              * animation-timing-function    規定動畫的速度曲線。
31              * animation-delay    規定在動畫開始之前的延遲。
32              * animation-iteration-count    規定動畫應該播放的次數。
33              * animation-direction    規定是否應該輪流反向播放動畫。
34              * **/
35             .pause {
36                 animation-play-state: paused;
37             }
38             .big_box{
39                 width: 100px;
40                 height: 100px;
41                 background: red;
42                 text-align: center;
43                 line-height: 100px;
44                 position: absolute;
45                 left: 0px;
46                 top: 40px;
47             }
48         style>
49     head>
50     <body>
51         <div class="big_box">一個盒子div>
52         <button class="button1">開始button>
53         <button class="button2">暫停button>        
54     body>
55     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
56     <script type="text/javascript">
57         $(".button2").attr("disabled",true);
58         $(".button1").on("click.animation",function(){
59             $(".big_box").addClass("dong");
60             $(".button2").attr("disabled",false);
61         })
62         $(".button2").on("click.pause",function(){
63             $(".big_box").toggleClass("pause");
64         })
65         
66     script>
67 html>

---------------------------------------華麗的分割線------------------------------------------------------

　　既然咱們提到了動畫，那就不能不提到動畫的性能。既然說到性能那肯定又要說道瀏覽器的重繪，回流還有重布局。這樣就很麻煩了，而且動畫不只有css的動畫，jquery也提供了一套動畫。所以我就簡單的總結了一下，如果不準確的話，請各位指教。

　　操作一個dom元素的位置的話，可以使用css3的transform屬性，這樣會比jquery的動畫快上不少。但是如果是操作一個dom元素的長寬的時候，盡量的使用jquery的動畫。但是需要注意的一點是，jquery的動畫只能設置數字值。也就是說你如果想動態的改變一個元素的背景顏色的話，只能使用css3的動畫。jquery無能為力，最后附上一個鏈接，我感覺寫的比較好。點這里，還有這一個

　-------------------------------------新增的內容-------------------------------------------------------

　　這次寫動畫是一個旋轉動畫，不同的一點是，點擊一個加號，然后讓他旋轉45°成為叉號，然后再次點擊的話，這個叉號，旋轉回來變成了加號。（設計的還挺好的）。這個需要多兩個屬性，是上面沒有用到的。就是

1 animation-iteration-count:1;/*播放一次*/
2 animation-fill-mode:forwards;/*停在最后一幀*/

　　播放次數和播放完成之后保留的最后的轉態。這個是這次新用的。然后我把demo也放在下面，方便大家直接觀看。

 1 DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>title>
 7         <style type="text/css">
 8             .open_add_more {
 9                 animation: open 0.5s ease-in-out 0s infinite;
10                 animation-iteration-count: 1;
11                 /*播放一次*/
12                 animation-fill-mode: forwards;
13                 /*停在最后一幀*/
14             }
15             
16             @keyframes open {
17                 from {
18                     transform: rotate(0deg);
19                 }
20                 to {
21                     transform: rotate(45deg);
22                 }
23             }
24             
25             .close_add_more {
26                 animation: close 0.5s ease-in-out 0s infinite;
27                 animation-iteration-count: 1;
28                 /*播放一次*/
29                 animation-fill-mode: forwards;
30                 /*停在最后一幀*/
31             }
32             
33             @keyframes close {
34                 from {
35                     transform: rotate(45deg);
36                 }
37                 to {
38                     transform: rotate(0deg);
39                 }
40             }
41         style>
42     head>
43 
44     <body>
45         <img src="https://s2.ax1x.com/2019/03/21/A15nF1.png" />
46     body>
47     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
48     <script type="text/javascript">
49         $("img").click(function() {
50             if($(this).hasClass("open_add_more")) {
51                 $(this).addClass("close_add_more").removeClass("open_add_more");
52 
53             } else {
54                 $(this).addClass("open_add_more").removeClass("close_add_more");
55             }
56 
57         })
58     script>
59 
60 html>

GPU云服務器云服務器 css3動畫高性能css3動畫 css3 css3氣泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1723.html

myslide 插件開發知識點總結和 css3 動畫性能問題的研究

摘要：插件開發知識點總結和動畫性能問題的研究這篇文章主要是總結最近開發過程中遇到的問題。有幾個問題又是不容易發現原因的問題，但是最后的結果又是很簡單的。和都是可以指定函數運行時，的值。比如觸發盒子的還有就是禁止元素在水平或者豎直方向滾動。 myslide 插件開發知識點總結和 css3 動畫性能問題的研究這篇文章主要是總結最近開發過程中遇到的問題。有幾個問題又是不容易發現原因的問題，但是最...

iliyaku 2019-08-19 17:54 評論0 收藏0
css3 動畫（三）animation 簡介

摘要：默認，只執行一次動畫動畫名稱，該名稱為動畫關鍵幀的名稱。默認如何理解表示的是關鍵幀的名稱，那么如何定義關鍵幀呢使用。語法名稱關鍵幀樣式或總結其實也并不復雜，其有個子屬性。下一篇動畫三源碼解析通過閱讀動畫庫的源碼，來提高對中屬性的認識前言上一篇中，總結了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animati...

itvincent 2019-08-29 16:05 評論0 收藏0
css3+less隨機動畫總結

摘要：前言有個動畫需求，有幾個，需要不同時，不同幅度移動，用了實現重點使用，內可嵌入代碼，獲得的內容可以做名字，也可以當作數字參與的其他計算，但是獲得的內容不能當作名字編譯前編譯后總結在前言有個動畫需求，有幾個div，需要不同時，不同幅度移動，用了css3+less實現重點使用~``，``內可嵌入js代碼，獲得的內容可以做keyframes 名字，也可以當作數字參與less的其他計算...

Mertens 2019-08-30 14:07 評論0 收藏0
不會做動畫的程序猿不是好的動畫師（如何用css3動畫做動畫）

摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉換一轉換縮放移動旋轉設置元素轉換的中心點綜合性寫法二轉換三維坐標系透視呈現位移旋轉一過渡一的作用如果你有一個盒子，他的體內也有個小盒子。 ...

xeblog 2021-11-11 16:55 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0