日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS3過渡與動畫

作者：小媛同學.， 更新時間： 2022-07-22 編程語言

一、過渡

過渡動畫： 是從一個狀態 漸漸的過渡到另外一個狀態

transition: 要過渡的屬性 ?花費時間 ?運動曲線 ?何時開始;

屬性 描述
transition 簡寫屬性，用于將四個過渡屬性設置為單一屬性。
transition-property 規定過渡效果所針對的 CSS 屬性的名稱。
transition-duration 規定過渡效果要持續多少秒或毫秒。

transition-timing-function

 屬性規定過渡效果的速度曲線。
transition-delay 屬性規定過渡效果的延遲(以秒計)。

指定過渡的速度曲線?

?transition-timing-function屬性可接受以下值:

  • ease -規定過渡效果，先緩慢地開始，然后加速，然后緩慢地結束（默認)
  • linear-規定從開始到結束具有相同速度的過渡效果
  • ease-in -規定緩慢開始的過渡效果
  • ease-out-規定緩慢結束的過渡效果
  • ease-in-out-規定開始和結束較慢的過渡效果
  • cubic-bezier(n,n,n,n)-允許您在三次貝塞爾函數中定義自己的值

?

示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border-radius: 50%;
            transition: all 2s;
        }
        .div-1:hover{
            width: 600px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div-1"></div>
</body>
</html>

二、動畫

CSS動畫屬性

屬性 描述
@keyframes 規定動畫模式。
animation 設置所有動畫屬性的簡寫屬性。
animation-delay 規定動畫開始的延遲。
animation-direction 定動畫是向前播放、向后播放還是交替播放。
animation-duration 規定動畫完成一個周期應花費的時間。
animation-fill-mode 規定元素在不播放動畫時的樣式（在開始前、結束后，或兩者同時）。
animation-iteration-count 規定動畫應播放的次數。
animation-name 規定@keyframes動畫的名稱。
animation-play-state 規定動畫是運行還是暫停。
animation-timing-function 規定動畫的速度曲線。

反向或交替運行動畫

animation-direction屬性指定是向前播放、向后播放還是交替播放動畫。

animation-direction屬性可接受以下值:

  • normal -動畫正常播放（向前)。默認值
  • reverse -動畫以反方向播放(向后)
  • alternate -動畫先向前播放，然后向后
  • alternate-reverse -動畫先向后播放，然后向前

指定動畫的速度曲線

animation-timing-function屬性規定動畫的速度曲線。

animation-timing-function屬性可接受以下值:

  • ease-指定從慢速開始，然后加快，然后緩慢結束的動畫(默認)
  • linear -規定從開始到結束的速度相同的動畫
  • ease-in-規定慢速開始的動畫
  • ease-out-規定慢速結束的動畫
  • ease-in-out-指定開始和結束較慢的動畫
  • cubic-bezier(n,n,n,n)-運行您在三次貝塞爾函數中定義自己的值

指定動畫的填充模式

?CSS動畫不會在第一個關鍵幀播放之前或在最后一個關鍵幀播放之后影響元素。animation-fill-mode屬性能夠覆蓋這種行為。

在不播放動畫時(在開始之前，結束之后，或兩者都結束時)，animation-fill-mode屬性規定目標元素的樣式。

animation-fill-mode 屬性可接受以下值:

  • none - 默認值。動畫在執行之前或之后不會對元素應用任何樣式。
  • ?forwards-元素將保留由最后一個關鍵楨設置的樣式值（依賴animation-direction和animation-iteration-count)
  • backwards -元素將獲取由第一個關鍵幀設置的樣式值(取決于animation-direction)，并在動畫延遲期間保留該值
  • both -動畫會同時遵循向前和向后的規則，從而在兩個方向上擴展動畫屬性。

?

?示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border-radius: 50%;
            /* 應用動畫 */
            animation-name: div-animate;/*指定動畫的名稱*/
            animation-duration: 4s;/*動畫持續的時間*/
            animation-fill-mode: forwards;/*動畫填充模式，forwards的作用是將動畫的樣式停留在最后一個*/
            /*animation-delay:動畫延遲的時間，當值為負數時表示動畫執行了多長時間*/
            /* animation-delay: -2s; */
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }
        /* 定義的動畫規則 */
        @keyframes div-animate {
            from{
                /* background-color: antiquewhite */
                margin-left: 0;
            }
            to{
                /* background-color: brown; */
                margin-left: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="div-1"></div>
</body>
</html>

原文鏈接：https://blog.csdn.net/m0_61843988/article/details/125919053

欄目分類
最近更新