CSS3 @keyframes 動畫效果
阿新 • • 發佈:2019-01-31
@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:
- 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>
- 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:
- 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>
- 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;
}
}
- 效果: 在2秒內,左側/右側四個圖示滑動到指定位置