css 3アニメーション入門

css 3ではアニメーション効果を作成でき、ページの変化がより一貫して柔らかいです.css 3の@keyframes規則は、アニメーションを作成するために使用されます.@keyframesには、アニメーションの開始から終了までのスタイルが規定されている.
@keyframesインスタンスの作成

（   -webkid-     chrome safari）
@-webkit-keyframes loading {
     
    from {
     opacity: 1;width:5px;height:20px;}
    to {
     opacity: 0.25;width:5px;height:20px;}
  }

アニメーションを要素にバインドする

div {
     
  //     0
    -webkit-animation: loading 1.2s ;//loading      。         
  }

アニメーションのスタイルと回数に制限はありません.パーセントを使用して変更時間を設定できます.fromとtoはパーセントの0と100%に等しくなります.
≪インスタンス｜Instance｜emdw≫

@-webkit-keyframes loading {
     
    0% {
     opacity: 1;width:5px;height:20px;}
    50% {
     opacity: 0.5;width:5px;height:20px;}
    100%{
     opacity: 0.1;width:5px;height:20px;}
  }

@keyframesの各プロパティは個別に定義できます
animation-name:バインドされたアニメーション名を規定するanimation-duration:アニメーションが1サイクル完了する時間を規定するanimation-delay:アニメーションがいつ開始されるかを規定し、デフォルト0 animation-iteration-count:再生回数を規定する.デフォルト1
完全な例:

<style>
    @-webkit-keyframes one{
     
        0%{
     background:blue;width:100px;height: 20px;}
        50% {
     background:red;width:150px;height: 20px;}
        100% {
     background:green;width:100px;height: 30px;}
    }
    #one{
     
        width: 100px;
        height: 20px;
        background-color: brown;
        -webkit-animation: one 1s ;
    }
</style>
<div id="one"></div>