css3實現迴圈執行動畫，且動畫每次都有延遲

来源:http://www.cnblogs.com/starof/archive/2016/04/29/5443445.html
-Advertisement-
Play Games

一、最終效果 需求：gift圖片的小動畫每隔2s執行一次。 需求就一句話，我們看一下實現過程。 二、實現過程 1、網頁結構 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> < ...


一、最終效果

 

需求：gift圖片的小動畫每隔2s執行一次。

需求就一句話，我們看一下實現過程。

二、實現過程

1、網頁結構

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
        display: inline-block;
        background-color: #cc2222;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        padding: 10px 12px;
        width: 100px;
        position: relative;
    }
    
    .ico {
        position: absolute;
        width: 14px;
        height: 16px;
        background: url(images/ico.png) no-repeat center;
        background-size: 100%;
        position: absolute;
        top: 4px;
        right: 27px;
    }
    </style>
</head>

<body>
    <nav>
        <a href="javascript:;" class="box">
                            一元奪寶 
                            <div class="ico"></div>
                        </a>
    </nav>
</body>

</html>
View Code

2、原始動畫

原始動畫效果為：滑鼠hover上去出現動畫。

動畫樣式如下：

/*動畫*/
    .ico:hover{
    -webkit-animation: Tada 1s both;
    -moz-animation: Tada 1s both;
    -ms-animation: Tada 1s both;
    animation: Tada 1s both
}
/*瀏覽器相容性部分略過*/
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    10%,20% {
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果：滑鼠hover上去gift圖片會動一動。

3、實現變化後的需求

需求變動，要求不再是hover上去展示動畫，而是每隔2s展示一次動畫。

思路：不需要hover上去出現動畫，就把hover去掉，每隔2s顯示一次動畫，很容易想到延遲2s,然後動畫一直執行。

此時相關樣式變成：

.ico{
-webkit-animation: Tada 1s  2s both infinite;
-moz-animation: Tada 1s 2s both infinite;
-ms-animation: Tada 1s 2s both infinite;
animation: Tada 1s 2s both infinite;
}

但是顯示的效果是：頁面載入第一次出現動畫會延遲2s，後面的動畫將不再有延遲。如下，這是不符合需求的。

為了看出效果，下圖為延遲6s的效果。

此時換種思路，不要延遲執行動畫，而是動畫的效果本身就是前2s元素不動，後1s是元素動，然後一直迴圈執行。 這樣在視覺上就會看起來是延遲2s執行1s動畫。

計算一下，原來的百分比節點變成了多少。

將動畫總時長變成3s，用計算出的百分比替換原來的百分比，代碼如下：

.ico{
    -webkit-animation: Tada 3s both infinite;
    -moz-animation: Tada 3s both infinite;
    -ms-animation: Tada 3s both infinite;
    animation: Tada 3s both infinite;
}
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果就是我們期望的了。

完整代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo of starof</title>
    <style>
    a {
        display: inline-block;
        background-color: #cc2222;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        padding: 10px 12px;
        width: 100px;
        position: relative;
    }
    
    .ico {
        position: absolute;
        width: 14px;
        height: 16px;
        background: url(images/ico.png) no-repeat center;
        background-size: 100%;
        position: absolute;
        top: 4px;
        right: 27px;
    }
    /*動畫*/
    .ico{
    -webkit-animation: Tada 3s both infinite;
    -moz-animation: Tada 3s both infinite;
    -ms-animation: Tada 3s both infinite;
    animation: Tada 3s both infinite;
}
@-webkit-keyframes Tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    70%,73% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-moz-keyframes Tada {
    0% {
        -moz-transform: scale(1);
        transform: scale(1)
    }

    70%,73% {
        -moz-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97% {
        -moz-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        -moz-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -moz-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-ms-keyframes Tada {
    0% {
        -ms-transform: scale(1);
        transform: scale(1)
    }

    70%,73% {
        -ms-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97% {
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93% {
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

    </style>
</head>

<body>
    <nav>
        <a href="javascript:;" class="box">
                            一元奪寶 
                            <div class="ico"></div>
        </a>
    </nav>
</body>

</html>
View Code

 

本文只是介紹一種思路，關於動畫各個參數詳情可參考：

css3中變形與動畫（一）

css3中變形與動畫（二）

css3中變形與動畫（三）

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5443445.html有問題歡迎與我討論，共同進步。


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

-Advertisement-
Play Games
更多相關文章
  • 左右無縫輪播圖的實現
    無縫輪播圖： ...
  • 第 14 章 CSS 顏色與度量單位
    學習要點： 1.顏色表方案 2.度量單位 主講教師：李炎恢 本章主要探討 HTML5 中 CSS 顏色和度量單位等問題，包括顏色的選取方式、相對長度和絕對長度等。 一．顏色表方案 顏色的表現形式主要有三種方式：顏色名稱、十六進位代碼和十進位代碼。 p { color: red; } 解釋：這是將一個 ...
  • 第 13 章 CSS 選擇器[上]
    學習要點： 1.選擇器總匯 2.基本選擇器 3.複合選擇器 4.偽元素選擇器 主講教師：李炎恢 本章主要探討 HTML5 中 CSS 選擇器，通過選擇器定位到想要設置樣式的元素。目前 CSS 選擇器的版本已經升級至第三代，即 CSS3 選擇器。CSS3 選擇器提供了更多、更豐富的選擇器方式，主要分為 ...
  • Atitit.隔行換色  變色 css3 結構性偽類選擇器
    Atitit.隔行換色 變色 css3 結構性偽類選擇器 1.1. css3隔行換色擴展閱讀 1 1.2. 結構偽選擇器 1 1.3. jQuery 選擇器2 1.1. css3隔行換色擴展閱讀 原理就是利用結構偽類選擇器 .list_div tr:nth-of-type(odd){backgrou ...
  • Atitit.jpg png格式差別以及解決jpg圖片不顯示的問題
    Atitit.jpg png格式差別以及解決jpg圖片不顯示的問題 圖片在pc上可以顯示，在Android上不能，img以及背景都不能顯示。。 Psd文件不能保存為png格式，只能jpg 原來是jpg文件是cmyk格式的。To rbg then nonk 作者:: ★(attilax)>>> 綽號: ...
  • jQuery點擊圖片彈出放大特效下載
    效果體驗：http://hovertree.com/texiao/jqimg/1/效果圖：代碼如下： 源碼下載：http://hovertree.com/h/bjaf/ljn1fwka.htm 轉自：http://hovertree.com/h/bjaf/flurt6nt.htm 特效庫：http: ...
  • [bootsrap]模態框使用例
    ...
  • bootstrap學習筆記(5)
    Bootstrap輸入框組 主要記住一個原則 創建輸入框的步驟 把首碼或尾碼元素放在一個帶有 class .input-group 的 <div> 中。 接著，在相同的 <div> 內，在 class 為 .input-group-addon 的 <span> 內放置額外的內容。 把該 <span> ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類