@keyframes 案例

1. 先設定動畫效果:

@keyframs  myframes{

from{   }

to{  transform:translate(300px);  }

}

2. 在元素的樣式中呼叫並設定動畫執行:

amimation-name:myframes;(自定義名稱)呼叫已經設定好的動畫。

amimation-duration:5s;(動畫持續的時間)設定動畫持續時間，單位為s。

amimation-timing-function:ease;(動畫過渡的型別)設定動畫的型別。

amimation-delay:0.5s;(動畫延遲的時間)設定動畫執行前的延遲時間。

amimation-iteration-count:infinite;(動畫迴圈次數)設定動畫迴圈的次數，同時注意有返回，每返算一次。

amimation-direction:alternate(往返);(迴圈中是否反向)設定動畫是否反向執行，預設不執行反向。
 

example:

1. html:

 <section class="banner_top box_bor" id='banner'>
        <div class="big_div">
            <div class="headerDScreen animationSpeed">
            </div>
            <div class="banner_text">
                 //文字啊，標題啊，圖片啊 
            </div>
        </div
 
>
    </section>

1. css:

section {
  width: 100%;
  min-width: 1050px;
  font-size: '蘋方' !important;
}
.banner_top {
  height: 730px;
  width: 100%;
  min-width: 1050px;
  position: relative;
  overflow: hidden;
  background-image: url('/static/weixueban/images/wxb_newindex/ban_none.png');
  background-position
 
: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@keyframes bannerScaleChange {    //定義的動畫bannerScaleChange
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
 .banner_top .big_div {
  width: 1050px;
  margin: 0 auto;
  height: 630px;
  position: relative;
  margin-top: 70px;
}
 .banner_top .big_div .headerDScreen {
  position: absolute;
  left: 0;
  top: 3%;
  width: 476px;
  height: 642px;
  background-image: url('/static/weixueban/images/wxb_newindex/hold_mobile.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: bannerScaleChange 15s infinite;  //使用動畫bannerScaleChange
  z-index: 1;
}

效果：頁面載入後圖片以15秒為週期放大到1.08倍，再縮小到一倍

example2:

1. html:

          <div class="store_img" >
            <div id="show_animate">
                    <div  id="animat_1" class="store_bule  bule_1  animat_1  animated">多套模板</div>
                    <div  id="animat_2" class="store_bule bule_2  animat_2 animated">自由編輯</div>
                    <div  id="animat_3" class="store_bule bule_3 animat_3  animated">門戶導航</div>
                    <div  id="animat_4" class="store_bule bule_4 animat_4 animated">多渠道展示</div>
            </div>
            <img src="/static/weixueban/images/wxb_newindex/know_store.png" alt="">
        </div>

1. css

            .store_img{
                  padding-top: 50px;
                  position: relative;
                  width: 1050px;
                  margin: 0 auto;
                  .store_bule{
                    background:#69C0FF;
                    color:#fff;
                    border-radius: 5px;
                    text-align: center;
                    font-size: 18px;
                  }
                  .bule_1{                     //定義圖示bule_1最後的位置
                    width: 120px;
                    height: 70px;
                    line-height: 70px;
                    position: absolute;
                    left: 2%;
                    top: 35%;
                  }
                  .bule_2{                     //定義圖示bule_2最後的位置
                    width: 100px;
                    height: 70px;
                    line-height: 70px;
                    position: absolute;
                    left: 7%;
                    bottom: 8%;
                  }
                  .bule_3{                    //定義圖示bule_3最後的位置
                    width: 100px;
                    height: 70px;
                    line-height: 70px;
                    position: absolute;
                    right: 2%;
                    top: 37%;
                  }
                  .bule_4{                     //定義圖示bule_4最後的位置
                    width: 120px;
                    height: 70px;
                    line-height: 70px;
                    position: absolute;
                    right: 12%;
                    bottom: 14%;
                  }
                   @keyframes animat_1{       //定義動畫animat_1
                       0%{opacity:0; transform:translate3d(-60px,0,0)}
                       to{transform:none}
                  }
                  .animat_1{                  //使用動畫animat_1
                    animation-name: animat_1;
                  }
                   @keyframes animat_2{        //定義動畫animat_2
                       0%{opacity:0; transform:translate3d(-60px,0,0)}
                       to{transform:none}
                  }
                  .animat_2{                    //使用動畫animat_2
                    animation-name: animat_2;
                  }
                  @keyframes animat_3{        //定義動畫animat_3
                       0%{opacity:0; transform:translate3d(60px,0,0)}
                       to{transform:none}
                  }
                  .animat_3{                  //使用動畫animat_3
                    animation-name: animat_3;
                  }
                  @keyframes animat_4{          //定義動畫animat_4
                    0%{opacity:0; transform:translate3d(60px,0,0)}
                    to{transform:none}
                }
                  .animat_4{                  //使用動畫animat_4
                    animation-name: animat_4;
                  }
                  .animated {
                    animation-duration: 2s;
                    animation-fill-mode: both;
                    animation-timing-function: ease;
                }
            }

1. 效果: 在2秒內，左側/右側四個圖示滑動到指定位置