css動畫(transition/transform/animation)

来源:https://www.cnblogs.com/www-123456/archive/2019/05/09/10837619.html
-Advertisement-
Play Games

在開發中，一個好的用戶操作界面，總會夾雜著一些動畫。css用對少的代碼，來給用戶最佳的體驗感，下麵我總結了一些css動畫屬性的使用方法及用例代碼供大家參考，在不對的地方，希望大佬直接拍磚評論。 1 transition(過渡) 使用語法: 參數： (1) property(設置過渡效果的css屬性名 ...


在開發中，一個好的用戶操作界面，總會夾雜著一些動畫。css用對少的代碼，來給用戶最佳的體驗感，下麵我總結了一些css動畫屬性的使用方法及用例代碼供大家參考，在不對的地方，希望大佬直接拍磚評論。

1 transition(過渡)

　　使用語法:

transition: property duration timing-function delay;

　　參數：

　　(1) property(設置過渡效果的css屬性名稱)：none | all | property。none表示沒有屬性獲得過渡效果；all表示所有屬性都將獲得過渡效果；property表示css屬性列表，多個屬性用逗號( , )隔開。

　　(2) duration(設置完成過渡效果的時間)：秒或毫秒(s/ms)。

　　(3) timing-function(設置效果速度的速度曲線)：linear，規定以相同速度開始到結束，等價於cubic-bezier(0,0,1,1)；ease，慢速開始，然後慢速結束，等價於cubic-bezier(0.25,0.1,0.25,1)；ease-in，以慢速開始，等價於cubic-bezier(0.42,0,1,1)；ease-out，以慢速結束，等價於cubic-bezier(0,0,0.58,1)；ease-in-out，以慢速開始和結束，等價於cubic-bezier(0.42,0,0.58,1)；cubic-bezier(n,n,n,n)，在該函數定義自己的值，數值為0-1之間。

　　(4) delay(過渡效果何時開始)：值多少秒後執行過渡效果，如 2s ，表示2s後執行。

2 transform

　　transform屬性應用於2D 或 3D轉換。該屬性允許我們能夠對元素進行旋轉、縮放、傾斜、移動這四類操作。

　　使用語法：

transform: none|transform-functions;

　　參數：

　　(1) none：定義不進行任何轉換，一般用於註冊掉該轉換。

　　(2) transform-functions：定義要進行轉換的類型函數。主要有：

　　　　旋轉(rotate)：主要分為2D旋轉和3D旋轉。rotate(angle)，2D 旋轉，參數為角度，如45deg；rotate(x,y,z,angle)，3D旋轉，圍繞原地到(x,y,z)的直線進行3D旋轉；rotateX(angle)，沿著X軸進行3D旋轉；rotateY(angle)；rotateZ(angle)；

　　　　縮放(scale)：一般用於元素的大小收縮設定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。

　　　　傾斜(skew)：主要用於對元素的樣式傾斜。skew(x-angle, y-angle)，沿著x和y軸的2D傾斜轉換；skewX(angle)，沿著x軸的2D傾斜轉換；skew(angle)，沿著y軸的2D傾斜轉換。

　　　　移動(translate)：主要用於將元素移動。translate(x, y)，定義向x和y軸移動的像素點；translate(x, y, z)，定義像x、y、z軸移動的像素點；translateX(x)；translateY(y)；translateZ(z)。

3 animation

　　該屬性主要用於設置動畫屬性。

　　使用語法：

animation: name duration timing-function delay iteration-count direction;

　　參數：

　　　　(1) name：需要綁定到選擇器的keyframe名稱。

　　　　(2) duration：完成該動畫需要花費的時間，秒或毫秒。

　　　　(3) timing-function：動畫的運動速度曲線。linear，規定以相同速度開始到結束，等價於cubic-bezier(0,0,1,1)；ease，慢速開始，然後慢速結束，等價於cubic-bezier(0.25,0.1,0.25,1)；ease-in，以慢速開始，等價於cubic-bezier(0.42,0,1,1)；ease-out，以慢速結束，等價於cubic-bezier(0,0,0.58,1)；ease-in-out，以慢速開始和結束，等價於cubic-bezier(0.42,0,0.58,1)；cubic-bezier(n,n,n,n)，在該函數定義自己的值，數值為0-1之間。

　　　　(4) delay：設置動畫在開始之前的延遲。

　　　　(5) iteration-count：設置動畫執行的次數。

　　　　(6) direction：是否輪詢反向播放動畫。normal，預設值，動畫應該正常播放；alternate，動畫應該輪流反向播放。

 

下麵展示了這些元素的測試代碼：

<!DOCTYPE html>
<html>
<head>
    <title>transition/transform</title>
</head>
<style type="text/css">
    #div1 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: red;
    }
    #div2 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: green;
    }
    #div3 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: blue;
    }
    #div4 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #234F21;
    }
    #div5 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #af123c;
    }
    #div6 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #affa3c;
    }
    /* transition 實現多個屬性 */
    #div1:active {
        width:200px;
        height: 200px;
        transition: width 2s ease,height 2s ease;
        -moz-transition: width 2s ease,height 2s ease; /* Firefox 4 */
        -webkit-transition: width 2s ease,height 2s ease; /* Safari 和 Chrome */
        -o-transition: width 2s ease,height 2s ease; /* Opera */
    }
    /* transform 旋轉 rotate */
    #div2:hover {
        transform:rotate(35deg);
        -ms-transform:rotate(35deg);     /* IE 9 */
        -moz-transform:rotate(35deg);     /* Firefox */
        -webkit-transform:rotate(35deg); /* Safari 和 Chrome */
        -o-transform:rotate(35deg);     /* Opera */
    }
    /* transform 縮放 scale */
    #div3:hover {
        transform:scale(0.8, 1.5);
        -ms-transform:scale(0.8, 1.5);     /* IE 9 */
        -moz-transform:scale(0.8, 1.5);     /* Firefox */
        -webkit-transform:scale(0.8, 1.5); /* Safari 和 Chrome */
        -o-transform:scale(0.8, 1.5);     /* Opera */
    }
    /* transform 傾斜 skew */
    #div4:hover {
        transform:skew(35deg);
        -ms-transform:skew(35deg);     /* IE 9 */
        -moz-transform:skew(35deg);     /* Firefox */
        -webkit-transform:skew(35deg); /* Safari 和 Chrome */
        -o-transform:skew(35deg);     /* Opera */
    }
    /* transform 移動 translate */
    #div5:hover {
        transform:translate(45px, 45px);
        -ms-transform:translate(45px, 45px);     /* IE 9 */
        -moz-transform:translate(45px, 45px);     /* Firefox */
        -webkit-transform:translate(45px, 45px); /* Safari 和 Chrome */
        -o-transform:translate(45px, 45px);     /* Opera */
    }
    /* transform 多個效果 */
    #div6:hover {
        transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);
        -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* IE 9 */
        -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px)translate(45px, 45px); /* Safari 和 Chrome */
        -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* Opera */
    }
</style>
<body>
    <div id="div1">transition</div>
    <div id="div2">transform rotate</div>
    <div id="div3">transform scale</div>
    <div id="div4">transform skew</div>
    <div id="div5">transform translate</div>
    <div id="div6">transform</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>transition/transform</title>
</head>
<style type="text/css">
    /* animation */
    .div7 {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s infinite;
        animation-direction:alternate;
        /* Safari and Chrome */
        -webkit-animation:myfirst 5s infinite;
        -webkit-animation-direction:alternate;
    }
    @keyframes myfirst{
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    @-webkit-keyframes myfirst {/* Safari and Chrome */
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
　　@-moz-keyframes myfirst {/* Firefox */
　　　　 0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
　　}
　　@-o-keyframes myfirst {/* Opera */
　　　　 0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
　　}
</style> <body> <div class="div7">animation</div> </body> </html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 02 servlet基礎 生命周期 tomcat web.xml
    新建web項目 – new Web Project – 選擇：javaee 5.0 建包 – com.gzsxt.wang 新建class:FirstServlet – 繼承：HttpServlet（javax.servlet.http.HttpServlet） 重寫service方法(兩個serv ...
  • 理解Express 中間件
    Express 中間件 Express程式基本上是一系列中間件函數的調用。中間件就是一個函數, 接受 、`res next`幾個參數。 中間件函數可以執行任何代碼, 對請求和響應對象進行修改, 結束請求/響應迴圈, 通過 next函數調用堆棧中下一個中間件函數。 必須通過 將控制權交給下一個中間件函 ...
  • cookie小總結
    對cookie總結 cookie 在伺服器的環境下，對數據的本地存儲下麵為一個小小的案例 cookie本身就是一串字元串，格式為鍵值對，常用在本地身份驗證，作免登陸 cookie的讀取每次都是全部獲取，所以在讀取的時候需要自己解析cookie代碼，獲得需要的代碼 cookie沒法直接刪除，但可以設置 ...
  • 小程式報錯 “渲染層錯誤” Expect END descriptor with depth 0 but get another
    項目中有幾個頁面在控制台出現這個“渲染層錯誤”，雖然不影響業務操作，怕存在潛在風險，今天抽時間找了下原因，解決這個問題。 控制台報錯日誌如下： (中國標準時間) 渲染層錯誤 Error: Expect END descriptor with depth 0 but get another at i. ...
  • 順豐原生地址庫封裝
    demo 省： 市： 區： ...
  • HTML+CSS的小實例
    通過一個月以來對HTML5+CSS的學習。這篇隨筆給大家來做一個簡單的網頁中常見的導航欄。 這些都稱之為網頁中的導航欄。 我簡單的做了一個某寶和58同城的導航欄，供大家學習參考。 一、58同城導航欄： 解析：首先我們來看到這個導航欄，我們可以把它分成兩個部分 左邊為一部分，右邊為一部分。把導航欄拆分 ...
  • Node.js實現用戶評論社區（體驗前後端開發的樂趣）
    前面 接著上一節的內容來，今天我們要完成一個用Node開發後臺伺服器，實現一個簡單的用戶評論社區。可以先看下效果圖： 開始 1. 建立項目文件夾 ，在裡面新建一個 文件夾， 文件夾存放我們允許客戶端訪問的資源，這裡是公開的。 文件是我們服務端代碼。 在 文件中放的是網站的首頁內容，這裡採用 框架快速 ...
  • 巨集任務和微任務：setTimeout和Promise執行順序
    先以一道面試題做引子： 寫出這段程式的輸出內容： 如果你看了這道題不知道怎麼下手，或者發現結果和自己的答案大相徑庭，請繼續往下看 1. javascript事件迴圈首先，你要知道javascript是單線程語言。js任務需要排隊順序執行，如果一個任務耗時過長，後邊一個任務也的等著，但是，假如我們需要 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類