この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2017-08-30 03:01:45

タイトル: ＠keyframes

CSSのアニメーションでは、決められた時間の中でどのタイミングで、

どの値がどう変化するかをキーフレームと呼ばれる書式で記入する。

 

例）ｈ1をスライドインするコード

h1 {

    animation-duration: 5s;

    animation-name: slidein;

}

@keyframes slidein {

    from {

        margin-left: 100%;

        width: 300%

    }

    to {

        margin-left: 0%;

        width: 100%; }

}