首页 > 代码库 > CSS里面常用的动画集合
CSS里面常用的动画集合
/* 印章效果 */@-webkit-keyframes zoomIn { 0% { opacity:0; -webkit-transform: scale3d(10, 10, 10); transform: scale3d(10, 10,10); } 1%{ } 100% { opacity:1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1,1); }}@keyframes zoomIn { 0% { opacity:0; -webkit-transform: scale3d(10, 10, 10); transform: scale3d(10, 10,10); } 1%{ opacity:1; } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }}.zoomInPanchu{ -webkit-animation: zoomIn 0.5s 1.5s both; animation: zoomIn 0.5s 1.5s both;}
/**底部箭头*/@-webkit-keyframes bounceInUp { 0%, 50%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}@keyframes bounceInUp { 0%, 50%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { opacity: 1; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;}
CSS里面常用的动画集合
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。