ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3アニメーションでフレーム単位のアニメーション効果を実装するサンプル紹介

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

高洛峰
高洛峰オリジナル
2017-03-09 17:11:001529ブラウズ

この記事では主にフレーム単位のアニメーション効果を実現するための 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实现逐帧动画效果示例介绍

steps(1 ,start): アニメーションは、このフレームの最初から最後まで 100% にジャンプします (サイクル全体ではありません)

steps(1,end): フレームの最後まで 0% のスタイルを維持します。このフレーム (サイクル全体ではありません)

アニメーション タイミング関数を直接設定することもできます: step-start/step-end
ステップ スタート エフェクトはsteps(1,start)と同等であり、ステップ エンド エフェクトはは、steps(1,end) と同等です

最終的な効果は、記録の問題によるものです。少し行き詰まっているかもしれません。興味のある学生は、コードを直接コピーして実行できます。以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、Duoduo が PHP 中国語 Web サイトをサポートすることを願っています。

以上がCSS3アニメーションでフレーム単位のアニメーション効果を実装するサンプル紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。