首页 > 代码库 > animation
animation
animation-name animation-duration/*持续时间*/ animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out animation-delay /*延迟时间*/ animation-iteration-count animation-direction :normal | altenate animation-fill-mode: none | forwards /*当动画完成后,保持最后一个属性值*/| backwards | both animation-play-state: paused|running .in { z-index:999; display: block; -webkit-animation: in-charlie .75s ease-out forwards .25s; -moz-animation: in-charlie .75s ease-out forwards .25s; -o-animation: in-charlie .75s ease-out forwards .25s; animation: in-charlie .75s ease-out forwards .25s; opacity: 0; } @-webkit-keyframes in-charlie { 0% { -webkit-transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; } } @-moz-keyframes in-charlie { 0% { -moz-transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -moz-transform: translate3d(0, 0, 0); opacity: 1; } } @-o-keyframes in-charlie { 0% { -o-transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -o-transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes in-charlie { 0% { -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } }
animation
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。