簡易 HTML CSS3 Animation 分享

css @keyframes

漸出設定
@keyframes mv-a{
0% { opacity: 0;}
100% { opacity: 1;}
}

位移設定
@keyframes mv-m1{
0% { left: -8%;}
100% { left: 0px;}
}

模糊設定
@keyframes mv-m2{
0% { filter: blur(10px); }
100% { }
}

css

.ad_w1 {
animation-name: mv-a, mv-m1; (引用 keyframes)
animation-duration: 1s; (動畫秒數)

-webkit-animation-fill-mode: forwards; (動畫靜止於最後秒格)
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

animation-iteration-count: 1; (動畫重複次數)
position: absolute;
width: 100%;
}

.ad_w2 {
animation-name: mv-a, mv-m2;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
position: absolute;
width: 100%;
}