CSS3アニメーションでフレーム単位のアニメーション効果を実装するサンプル紹介-CSSチュートリアル-php.cn

CSS3アニメーションでフレーム単位のアニメーション効果を実装するサンプル紹介

高洛峰

リリース： 2017-03-09 17:11:00

オリジナル

1544 人が閲覧しました

この記事では主にフレーム単位のアニメーション効果を実現するための CSS3 アニメーションの例を紹介します。興味のある方は参考にしてください。

CSS3 のアニメーション属性は非常に強力ですが、私自身はほとんど使用したことがありません。最近たまたま面接で聞かれたので、時間があるうちにアニメについて簡単にまとめてみます。同時に、演習としてフレーム単位のアニメーションのデモも実装します

アニメーション属性の概要

アニメーション属性がたくさんあるので、w3cで見るのはちょっと辛いので、簡単に作ってみました後で確認したい場合に一目でわかるようになります

CSS3 animation实现逐帧动画效果示例介绍

アニメーションを使用してフレームごとのアニメーションを実現します

アニメーションのプロパティに慣れたら、次のことを見つける必要があります。それを実装するための単純な小さなプロジェクトです。フレームごとのアニメーションは非常に興味深いものです。最初に実行して満足してください。アイデアは非常に単純です。要素にスプライトの背景を与え、次にフレームアニメーションを追加して背景を変更します。 -position キーコード:

@keyframes run{   
    from{   
        background-position: 0 0;   
    }   
    to{   
        background-position: -1540px 0 ;   
    }   
}   
p{   
    width:140px;   
    height:140px;   
    background: url(run.png) ;   
    animation-name：run;   
    animation-duration:1s;   
    animation-iteration-count:infinite;   
}

ログイン後にコピー

CSS3 animation实现逐帧动画效果示例介绍

しかし、実行後、アニメーションの各フレーム間のフレームアニメーションがスライドしていることがわかり、必要な効果が得られません。なぜでしょうか。

デフォルトでは、アニメーションは各キーフレームの間にトゥイーンアニメーションを挿入するため、アニメーション効果が一貫していることがわかります。
その理由がわかれば、解決するのは簡単です。

@keyframes run{   
    0%, 8%{  /*动作一*/  }   
    9.2%, 17.2%{  /*动作二*/  }   
    ...   
}

ログイン後にコピー

ステップ1。 : アクションは中間の 8 フレーム滞在し、0% はアクション 1 を設定し、アクション 1 は 8% で終了します

ステップ 2: アクション間の移行は 1.2 フレーム、9.2% はアクション 2 を設定し、アクション 2 は 17.2% で終了します

完全なコード:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css3逐帧动画</title>  
    <style>  
    @keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    @-webkit-keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    p{   
        width:140px;   
        height:140px;   
        background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;   
        animation:run 1s infinite;   
            -webkit-animation:run 1s infinite;   
        animation-fill-mode : backwards;   
            -webkit-animation-fill-mode : backwards;   
    }   
    </style>  
</head>  
<body>  
    <p></p>  
</body>  
</html>

ログイン後にコピー

別の実装方法があります。それは、フレーム間のステップアニメーションであるsteps()を使用することです。これは、w3cでは書かれていません

からわかるように、上の図: CSS3 animation实现逐帧动画效果示例介绍