CSS3常見(jiàn)動(dòng)畫的實(shí)現(xiàn)方式

發(fā)布時(shí)間：2021-04-14 16:51:09 作者：?jiǎn)葱歉哒?

我要評(píng)論

這篇文章主要介紹了CSS3常見(jiàn)動(dòng)畫的實(shí)現(xiàn)方式,幫助大家更好的理解和學(xué)習(xí)使用CSS3制作特效，感興趣的朋友可以了解下

一、是什么

CSS動(dòng)畫（CSS Animations）是為層疊樣式表建議的允許可擴(kuò)展標(biāo)記語(yǔ)言（XML）元素使用CSS的動(dòng)畫的模塊

即指元素從一種樣式逐漸過(guò)渡為另一種樣式的過(guò)程

常見(jiàn)的動(dòng)畫效果有很多，如平移、旋轉(zhuǎn)、縮放等等，復(fù)雜動(dòng)畫則是多個(gè)簡(jiǎn)單動(dòng)畫的組合

css實(shí)現(xiàn)動(dòng)畫的方式，有如下幾種：

transition 實(shí)現(xiàn)漸變動(dòng)畫
transform 轉(zhuǎn)變動(dòng)畫
animation 實(shí)現(xiàn)自定義動(dòng)畫

二、實(shí)現(xiàn)方式

transition 實(shí)現(xiàn)漸變動(dòng)畫

transition的屬性如下：

property:填寫需要變化的css屬性
duration:完成過(guò)渡效果需要的時(shí)間單位(s或者ms)
timing-function:完成效果的速度曲線
delay: 動(dòng)畫效果的延遲觸發(fā)時(shí)間

其中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)	在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值

注意：并不是所有的屬性都能使用過(guò)渡的，如display:none<->display:block

舉個(gè)例子，實(shí)現(xiàn)鼠標(biāo)移動(dòng)上去發(fā)生變化動(dòng)畫效果

<style>
       .base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width, height, background-color, border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        }

        /*簡(jiǎn)寫*/
        /*transition: all 2s ease-in 500ms;*/
        .base:hover {
            width: 200px;
            height: 200px;
            background-color: #5daf34;
            border-width: 10px;
            border-color: #3a8ee6;
        }
</style>
<div ></div>

transform 轉(zhuǎn)變動(dòng)畫

包含四個(gè)常用的功能：

translate：位移
scale：縮放
rotate：旋轉(zhuǎn)
skew：傾斜

一般配合transition過(guò)度使用

注意的是，transform不支持inline元素，使用前把它變成block

舉個(gè)例子

<style>
    .base {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: #0EA9FF;
        border-width: 5px;
        border-style: solid;
        border-color: #5daf34;
        transition-property: width, height, background-color, border-width;
        transition-duration: 2s;
        transition-timing-function: ease-in;
        transition-delay: 500ms;
    }
    .base2 {
        transform: none;
        transition-property: transform;
        transition-delay: 5ms;
    }

    .base2:hover {
        transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
    }
</style>
 <div ></div>

可以看到盒子發(fā)生了旋轉(zhuǎn)，傾斜，平移，放大

animation 實(shí)現(xiàn)自定義動(dòng)畫

animation是由 8 個(gè)屬性的簡(jiǎn)寫，分別如下：

屬性	描述	屬性值
animation-duration	指定動(dòng)畫完成一個(gè)周期所需要時(shí)間，單位秒（s）或毫秒（ms），默認(rèn)是 0
animation-timing-function	指定動(dòng)畫計(jì)時(shí)函數(shù)，即動(dòng)畫的速度曲線，默認(rèn)是 "ease"	linear、ease、ease-in、ease-out、ease-in-out
animation-delay	指定動(dòng)畫延遲時(shí)間，即動(dòng)畫何時(shí)開(kāi)始，默認(rèn)是 0
animation-iteration-count	指定動(dòng)畫播放的次數(shù)，默認(rèn)是 1
animation-direction 指定動(dòng)畫播放的方向	默認(rèn)是 normal	normal、reverse、alternate、alternate-reverse
animation-fill-mode	指定動(dòng)畫填充模式。默認(rèn)是 none	forwards、backwards、both
animation-play-state	指定動(dòng)畫播放狀態(tài)，正在運(yùn)行或暫停。默認(rèn)是 running	running、pauser
animation-name	指定 @keyframes 動(dòng)畫的名稱

CSS 動(dòng)畫只需要定義一些關(guān)鍵的幀，而其余的幀，瀏覽器會(huì)根據(jù)計(jì)時(shí)函數(shù)插值計(jì)算出來(lái)，

通過(guò) @keyframes 來(lái)定義關(guān)鍵幀

因此，如果我們想要讓元素旋轉(zhuǎn)一圈，只需要定義開(kāi)始和結(jié)束兩幀即可：

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

from 表示最開(kāi)始的那一幀，to 表示結(jié)束時(shí)的那一幀

也可以使用百分比刻畫生命周期

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

定義好了關(guān)鍵幀后，下來(lái)就可以直接用它了：

animation: rotate 2s;

三、總結(jié)

屬性	含義
transition（過(guò)度）	用于設(shè)置元素的樣式過(guò)度，和animation有著類似的效果，但細(xì)節(jié)上有很大的不同
transform（變形）	用于元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜，和設(shè)置樣式的動(dòng)畫并沒(méi)有什么關(guān)系，就相當(dāng)于color一樣用來(lái)設(shè)置元素的“外表”
translate（移動(dòng)）	只是transform的一個(gè)屬性值，即移動(dòng)
animation（動(dòng)畫）	用于設(shè)置動(dòng)畫屬性，他是一個(gè)簡(jiǎn)寫的屬性，包含6個(gè)屬性