[day15]認識@keyframes與animation

2023 iThome 鐵人賽

DAY 15

Modern Web

html/css/js的各種操作系列第 15 篇

15th鐵人賽

oLunao

團隊NUTC_IMAC_WEB_桑貝比

2023-09-30 04:22:23

246 瀏覽

分享至

OK，看了那麼多個跟css有關的屬性，接下來就是實用了，並且會在加入一些可讓css動畫更靈活的屬性

@keyframes

@keyframes是用於你動畫的步驟，你可以使用0%、50%、100%，來對應動畫的某一時刻，在每個時刻可以在加入新的樣式，使得你的css動畫可以在一個間段中達到數種效果。
至於%數的定義是甚麼?當然是你給的時間囉，如果你給你的動畫設定3秒完成那麼50%就是1.5s。
範例打法

 @keyframes anim {
            0% {
                background-color: aqua;
                width: 0;
            }

            50% {
                background-color: pink;
                width: 100%;
            }

            100% {
                background-color: palevioletred;
            }

先示範後面會教簡單的label小動畫。

animation

animation是一個自定義過渡效果，他需要跟上面的@keyframes做搭配，那麼盡然是過渡效果那麼他也跟transition的語法很接近。
animation: @keyframes的動畫名稱持續時間曲線延遲;

但有兩個特殊的東西
animation-iteration-count: infinite;可以讓你的動畫無限動作
animation-direction: alternate-reverse;從100%~0%，即反向

label過渡動畫實作

那麼我在這放一個label小動畫程式，改一下也能套用到button，下面在做解釋

<style>
    <style>
        label {
            position: relative;
            border: 2px solid black;
            border-radius: 20px;
            margin-top: 30px;
            padding: 10px 30px;
            background-color: aqua;
            overflow: hidden;
            transition: 1s;
        }

        label span {
            position: relative;
            z-index: 1;
        }

        label::after,label:before {
            content: "";
            width: 0;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            border-radius: inherit;
        }

        label:hover:after {
            animation: anim 1.5s ease-in-out;
        }
        label:not(:hover)::before {
            animation: anim 1.5s ease-in-out;
            animation-direction: alternate-reverse;
        }

        label:hover {
            transition: all 0.5s ease 0.75s;
            background-color: palevioletred;
        }

        @keyframes anim {
            0% {
                background-color: aqua;
                width: 0;
            }

            45% {
                background-color: pink;
                width: 100%;
            }

            55% {
                width: 100%;
            }

            100% {
                background-color: palevioletred;
                width: 0;
            }
        }
    </style>
</style>
<body>
 <div class="w-100 d-flex justify-content-center align-items-center">
        <label><span>測試</span></label>
    </div>
</body>

只解釋一些比較重要的地方，美觀設定就不說了
label:
overflow: hidden;讓after覆蓋的時候只顯示純在於他區塊的部分。
position: relative;讓after和span繼承
transition: 1s;放開的時候也可以出現動畫

span:
為甚麼不直接打字?因為你是用label的after去覆蓋當背景那麼就要把字隔開
所以才有z-index:1，而position: relative是因為你不啟用z-index就會失效。

after:
content: "";前面說的可以使after和before擁有一個區塊
position: absolute;再讓他脫離文本，可以把label的overflow: hidden;和position: relative;關掉看他怎麼運作

剩下的就是animation的套用與@keyframes設定

小問題：
不過還是有小bug後面發現有點懶得改，就是你如果只是摸過去他也會顯示動畫，可能是這部分的問題
label:not(:hover)::before{}，不太應該用hover:after，應該用label:hover去控制就好，之所以會出現not(:hover)就是因為要配合hover:after，不過後面才發現就懶得修了。

今天就這樣啦，謝謝觀看~~