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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

CSS3過(guò)渡與動(dòng)畫(huà)

作者：小媛同學(xué).， 更新時(shí)間： 2022-07-22 編程語(yǔ)言

一、過(guò)渡

過(guò)渡動(dòng)畫(huà)： 是從一個(gè)狀態(tài) 漸漸的過(guò)渡到另外一個(gè)狀態(tài)

transition: 要過(guò)渡的屬性 ?花費(fèi)時(shí)間 ?運(yùn)動(dòng)曲線 ?何時(shí)開(kāi)始;

屬性 描述
transition 簡(jiǎn)寫(xiě)屬性，用于將四個(gè)過(guò)渡屬性設(shè)置為單一屬性。
transition-property 規(guī)定過(guò)渡效果所針對(duì)的 CSS 屬性的名稱(chēng)。
transition-duration 規(guī)定過(guò)渡效果要持續(xù)多少秒或毫秒。

transition-timing-function

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

指定過(guò)渡的速度曲線?

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

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

?

示例代碼如下：

<!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>

二、動(dòng)畫(huà)

CSS動(dòng)畫(huà)屬性

屬性 描述
@keyframes 規(guī)定動(dòng)畫(huà)模式。
animation 設(shè)置所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性。
animation-delay 規(guī)定動(dòng)畫(huà)開(kāi)始的延遲。
animation-direction 定動(dòng)畫(huà)是向前播放、向后播放還是交替播放。
animation-duration 規(guī)定動(dòng)畫(huà)完成一個(gè)周期應(yīng)花費(fèi)的時(shí)間。
animation-fill-mode 規(guī)定元素在不播放動(dòng)畫(huà)時(shí)的樣式（在開(kāi)始前、結(jié)束后，或兩者同時(shí)）。
animation-iteration-count 規(guī)定動(dòng)畫(huà)應(yīng)播放的次數(shù)。
animation-name 規(guī)定@keyframes動(dòng)畫(huà)的名稱(chēng)。
animation-play-state 規(guī)定動(dòng)畫(huà)是運(yùn)行還是暫停。
animation-timing-function 規(guī)定動(dòng)畫(huà)的速度曲線。

反向或交替運(yùn)行動(dòng)畫(huà)

animation-direction屬性指定是向前播放、向后播放還是交替播放動(dòng)畫(huà)。

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

  • normal -動(dòng)畫(huà)正常播放（向前)。默認(rèn)值
  • reverse -動(dòng)畫(huà)以反方向播放(向后)
  • alternate -動(dòng)畫(huà)先向前播放，然后向后
  • alternate-reverse -動(dòng)畫(huà)先向后播放，然后向前

指定動(dòng)畫(huà)的速度曲線

animation-timing-function屬性規(guī)定動(dòng)畫(huà)的速度曲線。

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

  • ease-指定從慢速開(kāi)始，然后加快，然后緩慢結(jié)束的動(dòng)畫(huà)(默認(rèn))
  • linear -規(guī)定從開(kāi)始到結(jié)束的速度相同的動(dòng)畫(huà)
  • ease-in-規(guī)定慢速開(kāi)始的動(dòng)畫(huà)
  • ease-out-規(guī)定慢速結(jié)束的動(dòng)畫(huà)
  • ease-in-out-指定開(kāi)始和結(jié)束較慢的動(dòng)畫(huà)
  • cubic-bezier(n,n,n,n)-運(yùn)行您在三次貝塞爾函數(shù)中定義自己的值

指定動(dòng)畫(huà)的填充模式

?CSS動(dòng)畫(huà)不會(huì)在第一個(gè)關(guān)鍵幀播放之前或在最后一個(gè)關(guān)鍵幀播放之后影響元素。animation-fill-mode屬性能夠覆蓋這種行為。

在不播放動(dòng)畫(huà)時(shí)(在開(kāi)始之前，結(jié)束之后，或兩者都結(jié)束時(shí))，animation-fill-mode屬性規(guī)定目標(biāo)元素的樣式。

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

  • none - 默認(rèn)值。動(dòng)畫(huà)在執(zhí)行之前或之后不會(huì)對(duì)元素應(yīng)用任何樣式。
  • ?forwards-元素將保留由最后一個(gè)關(guān)鍵楨設(shè)置的樣式值（依賴(lài)animation-direction和animation-iteration-count)
  • backwards -元素將獲取由第一個(gè)關(guān)鍵幀設(shè)置的樣式值(取決于animation-direction)，并在動(dòng)畫(huà)延遲期間保留該值
  • both -動(dòng)畫(huà)會(huì)同時(shí)遵循向前和向后的規(guī)則，從而在兩個(gè)方向上擴(kuò)展動(dòng)畫(huà)屬性。

?

?示例代碼：

<!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%;
            /* 應(yīng)用動(dòng)畫(huà) */
            animation-name: div-animate;/*指定動(dòng)畫(huà)的名稱(chēng)*/
            animation-duration: 4s;/*動(dòng)畫(huà)持續(xù)的時(shí)間*/
            animation-fill-mode: forwards;/*動(dòng)畫(huà)填充模式，forwards的作用是將動(dòng)畫(huà)的樣式停留在最后一個(gè)*/
            /*animation-delay:動(dòng)畫(huà)延遲的時(shí)間，當(dāng)值為負(fù)數(shù)時(shí)表示動(dòng)畫(huà)執(zhí)行了多長(zhǎng)時(shí)間*/
            /* animation-delay: -2s; */
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }
        /* 定義的動(dòng)畫(huà)規(guī)則 */
        @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

欄目分類(lèi)
最近更新