自己寫的幾個常用css動畫（自己收藏用）
阿新 • • 發佈：2018-12-26
/*向左移動並彈性顯示*/ @-webkit-keyframes fadeToLeftTan{ 0%{ -webkit-transform:translateX(100%); opacity:0;} 70%{ -webkit-transform:translateX(-5%); opacity:1;} 80%{ -webkit-transform:translateX(2%); opacity:1;} 90%{ -webkit-transform:translateX(-2%); opacity:1;} 100%{ -webkit-transform:translateX(0); opacity:1;} } @keyframes fadeToLeftTan{ 0%{ transform:translateX(100%); opacity:0;} 70%{ transform:translateX(-5%); opacity:1;} 80%{ transform:translateX(2%); opacity:1;} 90%{ transform:translateX(-2%); opacity:1;} 100%{ transform:translateX(0); opacity:1;} } /*向右移動並彈性顯示*/ @-webkit-keyframes fadeToRightTan{ 0%{ -webkit-transform:translateX(-100%); opacity:0;} 70%{ -webkit-transform:translateX(5%); opacity:1;} 80%{ -webkit-transform:translateX(-2%); opacity:1;} 90%{ -webkit-transform:translateX(2%); opacity:1;} 100%{ -webkit-transform:translateX(0); opacity:1;} } @keyframes fadeToRightTan{ 0%{ transform:translateX(-100%); opacity:0;} 70%{ transform:translateX(5%); opacity:1;} 80%{ transform:translateX(-2%); opacity:1;} 90%{ transform:translateX(2%); opacity:1;} 100%{ transform:translateX(0); opacity:1;} } /*向上移動並彈性顯示*/ @-webkit-keyframes fadeToTopTan{ 0%{ -webkit-transform:translateY(100%); opacity:0;} 70%{ -webkit-transform:translateY(-5%); opacity:1;} 80%{ -webkit-transform:translateY(2%); opacity:1;} 90%{ -webkit-transform:translateY(-2%); opacity:1;} 100%{ -webkit-transform:translateY(0); opacity:1;} } @keyframes fadeToTopTan{ 0%{ transform:translateY(100%); opacity:0;} 70%{ transform:translateY(-5%); opacity:1;} 80%{ transform:translateY(2%); opacity:1;} 90%{ transform:translateY(-2%); opacity:1;} 100%{ transform:translateY(0); opacity:1;} } /*向下移動並彈性顯示*/ @-webkit-keyframes fadeToDownTan{ 0%{ -webkit-transform:translateY(-100%); opacity:0;} 70%{ -webkit-transform:translateY(5%); opacity:1;} 80%{ -webkit-transform:translateY(-2%); opacity:1;} 90%{ -webkit-transform:translateY(2%); opacity:1;} 100%{ -webkit-transform:translateY(0); opacity:1;} } @keyframes fadeToDownTan{ 0%{ transform:translateY(-100%); opacity:0;} 70%{ transform:translateY(5%); opacity:1;} 80%{ transform:translateY(-2%); opacity:1;} 90%{ transform:translateY(2%); opacity:1;} 100%{ transform:translateY(0); opacity:1;} } /*從大向小變化彈性顯示*/ @-webkit-keyframes fadeInMaxToMinTan{ 0%{ -webkit-transform:scale(2); opacity:0;} 70%{ -webkit-transform:scale(.9); opacity:1;} 85%{ -webkit-transform:scale(1.1); opacity:1;} 100%{ -webkit-transform:scale(1); opacity:1;} } @keyframes fadeInMaxToMinTan{ 0%{ transform:scale(2); opacity:0;} 70%{ transform:scale(.9); opacity:1;} 85%{ transform:scale(1.1); opacity:1;} 100%{ transform:scale(1); opacity:1;} } /*從小向大變化彈性顯示*/ @-webkit-keyframes fadeInMinToMaxTan{ 0%{ -webkit-transform:scale(0); opacity:0;} 70%{ -webkit-transform:scale(1.1); opacity:1;} 85%{ -webkit-transform:scale(.9); opacity:1;} 100%{ -webkit-transform:scale(1); opacity:1;} } @keyframes fadeInMinToMaxTan{ 0%{ transform:scale(0); opacity:0;} 70%{ transform:scale(1.1); opacity:1;} 85%{ transform:scale(.9); opacity:1;} 100%{ transform:scale(1); opacity:1;} } /**********************************/ /*向左移動顯示*/ @-webkit-keyframes fadeToLeft{ 0%{ -webkit-transform:translateX(100%); opacity:0;} 100%{ -webkit-transform:translateX(0); opacity:1;} } @keyframes fadeToLeft{ 0%{ transform:translateX(100%); opacity:0;} 100%{ transform:translateX(0); opacity:1;} } /*向右移動顯示*/ @-webkit-keyframes fadeToRight{ 0%{ -webkit-transform:translateX(-100%); opacity:0;} 100%{ -webkit-transform:translateX(0); opacity:1;} } @keyframes fadeToRight{ 0%{ transform:translateX(-100%); opacity:0;} 100%{ transform:translateX(0); opacity:1;} } /*向上移動顯示*/ @-webkit-keyframes fadeToTop{ 0%{ -webkit-transform:translateY(100%); opacity:0;} 100%{ -webkit-transform:translateY(0); opacity:1;} } @keyframes fadeToTop{ 0%{ transform:translateY(100%); opacity:0;} 100%{ transform:translateY(0); opacity:1;} } /*向上60移動顯示*/ @-webkit-keyframes fadeToTop60{ 0%{ -webkit-transform:translateY(60px); opacity:0;} 100%{ -webkit-transform:translateY(0); opacity:1;} } @keyframes fadeToTop60{ 0%{ transform:translateY(60px); opacity:0;} 100%{ transform:translateY(0); opacity:1;} } /*向下移動顯示*/ @-webkit-keyframes fadeToDown{ 0%{ -webkit-transform:translateY(-100%); opacity:0;} 100%{ -webkit-transform:translateY(0); opacity:1;} } @keyframes fadeToDown{ 0%{ transform:translateY(-100%); opacity:0;} 100%{ transform:translateY(0); opacity:1;} } /*向下60移動顯示*/ @-webkit-keyframes fadeToDown60{ 0%{ -webkit-transform:translateY(-60px); opacity:0;} 100%{ -webkit-transform:translateY(0); opacity:1;} } @keyframes fadeToDown60{ 0%{ transform:translateY(-60px); opacity:0;} 100%{ transform:translateY(0); opacity:1;} } /**********************************/ /*上下微移漂浮*/ @-webkit-keyframes flashTopDown{ 0%{ -webkit-transform:translateY(0); opacity:1;} 100%{ -webkit-transform:translateY(8px); opacity:.8;} } @keyframes flashTopDown{ 0%{ transform:translateY(0); opacity:1;} 100%{ transform:translateY(8px); opacity:.8;} } /**********************************/ /*從大向小變化顯示*/ @-webkit-keyframes fadeInMaxToMin{ 0%{ -webkit-transform:scale(2); opacity:0;} 100%{ -webkit-transform:scale(1); opacity:1;} } @keyframes fadeInMaxToMin{ 0%{ transform:scale(2); opacity:0;} 100%{ transform:scale(1); opacity:1;} } /*從小向大變化顯示*/ @-webkit-keyframes fadeInMinToMax{ 0%{ -webkit-transform:scale(0); opacity:0;} 100%{ -webkit-transform:scale(1); opacity:1;} } @keyframes fadeInMinToMax{ 0%{ transform:scale(0); opacity:0;} 100%{ transform:scale(1); opacity:1;} } /**********************************/ /*大小閃動變化 變小*/ @-webkit-keyframes flashMaxMin{ 0%{ -webkit-transform:scale(1);} 100%{ -webkit-transform:scale(.98);} } @keyframes flashMaxMin{ 0%{ transform:scale(1);} 100%{ transform:scale(.98);} } /*大小閃動變化變大*/ @-webkit-keyframes flashMax{ 0%{ -webkit-transform:scale(1);} 100%{ -webkit-transform:scale(1.05);} } @keyframes flashMax{ 0%{ transform:scale(1);} 100%{ transform:scale(1.05);} } /**********************************/ /*漸顯*/ @-webkit-keyframes fadeIn{ 0%{ opacity:0;} 100%{ opacity:1;} } @keyframes fadeIn{ 0%{ opacity:0;} 100%{ opacity:1;} } /*漸隱*/ @-webkit-keyframes fadeOut{ 0%{ opacity:1;} 100%{ opacity:0;} } @keyframes fadeOut{ 0%{ opacity:1;} 100%{ opacity:0;} }
壓縮後：
@-webkit-keyframes fadeToLeftTan{0%{-webkit-transform:translateX(100%);opacity:0}70%{-webkit-transform:translateX(-5%);opacity:1}80%{-webkit-transform:translateX(2%);opacity:1}90%{-webkit-transform:translateX(-2%);opacity:1}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToLeftTan{0%{transform:translateX(100%);opacity:0}70%{transform:translateX(-5%);opacity:1}80%{transform:translateX(2%);opacity:1}90%{transform:translateX(-2%);opacity:1}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToRightTan{0%{-webkit-transform:translateX(-100%);opacity:0}70%{-webkit-transform:translateX(5%);opacity:1}80%{-webkit-transform:translateX(-2%);opacity:1}90%{-webkit-transform:translateX(2%);opacity:1}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToRightTan{0%{transform:translateX(-100%);opacity:0}70%{transform:translateX(5%);opacity:1}80%{transform:translateX(-2%);opacity:1}90%{transform:translateX(2%);opacity:1}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToTopTan{0%{-webkit-transform:translateY(100%);opacity:0}70%{-webkit-transform:translateY(-5%);opacity:1}80%{-webkit-transform:translateY(2%);opacity:1}90%{-webkit-transform:translateY(-2%);opacity:1}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToTopTan{0%{transform:translateY(100%);opacity:0}70%{transform:translateY(-5%);opacity:1}80%{transform:translateY(2%);opacity:1}90%{transform:translateY(-2%);opacity:1}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToDownTan{0%{-webkit-transform:translateY(-100%);opacity:0}70%{-webkit-transform:translateY(5%);opacity:1}80%{-webkit-transform:translateY(-2%);opacity:1}90%{-webkit-transform:translateY(2%);opacity:1}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToDownTan{0%{transform:translateY(-100%);opacity:0}70%{transform:translateY(5%);opacity:1}80%{transform:translateY(-2%);opacity:1}90%{transform:translateY(2%);opacity:1}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeInMaxToMinTan{0%{-webkit-transform:scale(2);opacity:0}70%{-webkit-transform:scale(.9);opacity:1}85%{-webkit-transform:scale(1.1);opacity:1}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMaxToMinTan{0%{transform:scale(2);opacity:0}70%{transform:scale(.9);opacity:1}85%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeInMinToMaxTan{0%{-webkit-transform:scale(0);opacity:0}70%{-webkit-transform:scale(1.1);opacity:1}85%{-webkit-transform:scale(.9);opacity:1}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMinToMaxTan{0%{transform:scale(0);opacity:0}70%{transform:scale(1.1);opacity:1}85%{transform:scale(.9);opacity:1}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeToLeft{0%{-webkit-transform:translateX(100%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToLeft{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToRight{0%{-webkit-transform:translateX(-100%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToRight{0%{transform:translateX(-100%);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToTop{0%{-webkit-transform:translateY(100%);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToTop{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToTop60{0%{-webkit-transform:translateY(60px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToTop60{0%{transform:translateY(60px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToDown{0%{-webkit-transform:translateY(-100%);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToDown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToDown60{0%{-webkit-transform:translateY(-60px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToDown60{0%{transform:translateY(-60px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes flashTopDown{0%{-webkit-transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(8px);opacity:.8}}@keyframes flashTopDown{0%{transform:translateY(0);opacity:1}100%{transform:translateY(8px);opacity:.8}}@-webkit-keyframes fadeInMaxToMin{0%{-webkit-transform:scale(2);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMaxToMin{0%{transform:scale(2);opacity:0}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeInMinToMax{0%{-webkit-transform:scale(0);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMinToMax{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@-webkit-keyframes flashMaxMin{0%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(.98)}}@keyframes flashMaxMin{0%{transform:scale(1)}100%{transform:scale(.98)}}@-webkit-keyframes flashMax{0%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(1.05)}}@keyframes flashMax{0%{transform:scale(1)}100%{transform:scale(1.05)}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}