Yo : ./style/lib/ani/stretch.scss
源代码
源代码
@charset "utf-8"; @import "classes"; /** * @module other * @description 定义橡皮圈拉伸回弹动画 * @method stretch */ @-webkit-keyframes stretch { 0% { -webkit-transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, .75, 1); } 40% { -webkit-transform: scale3d(.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, .85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @keyframes stretch { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, .75, 1); } 40% { transform: scale3d(.75, 1.25, 1); } 50% { transform: scale3d(1.15, .85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } 100% { transform: scale3d(1, 1, 1); } } .ani.stretch { -webkit-animation-name: stretch; animation-name: stretch; }