| CSS3 animation动画中途停顿延迟 | 您所在的位置：网站首页 › css3帧动画遇到问题怎么解决 › CSS3 animation动画中途停顿延迟 |
CSS3 animation动画中途停顿延迟
|
CSS3 animation动画中的animation-delay属性是指动画开始之前的延迟，如何实现动画中途停顿或延迟呢，可以用进程进行控制。 比如，最近做了一个连续滚动的字幕，要求中途有有节奏性的短暂停留或延迟。之前一直考虑用JS实现；但用CSS3实现则更妙。话不多说，代码如下： CSS3 animation动画中途停顿延迟 #box { display:inline-block; *display:inline; *zoom:1; height:34px; line-height:34px; overflow:hidden; background-color:#FFFF66; } #box a { height:34px; white-space:nowrap; display:block; animation:rowup 6s ease 3s infinite; -webkit-animation:rowup 6s ease 3s infinite; } @-webkit-keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10% { -webkit-transform: translate3d(0, -34px, 0); transform: translate3d(0, -34px, 0); } 50% { -webkit-transform: translate3d(0, -34px, 0); transform: translate3d(0, -34px, 0); } 60% { -webkit-transform: translate3d(0, -68px, 0); transform: translate3d(0, -68px, 0); } 100% { -webkit-transform: translate3d(0, -68px, 0); transform: translate3d(0, -68px, 0); } } @-moz-keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10% { -webkit-transform: translate3d(0, -34px, 0); transform: translate3d(0, -34px, 0); } 50% { -webkit-transform: translate3d(0, -34px, 0); transform: translate3d(0, -34px, 0); } 60% { -webkit-transform: translate3d(0, -68px, 0); transform: translate3d(0, -68px, 0); } 100% { -webkit-transform: translate3d(0, -68px, 0); transform: translate3d(0, -68px, 0); } } @keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10% { -webkit-transform: translate3d(0, -34px, 0); transform: translate3d(0, -34px, 0); } 50% { -webkit-transform: translate3d(0, -34px, 0); transform: translate3d(0, -34px, 0); } 60% { -webkit-transform: translate3d(0, -68px, 0); transform: translate3d(0, -68px, 0); } 100% { -webkit-transform: translate3d(0, -68px, 0); transform: translate3d(0, -68px, 0); } } 开业酬宾，好礼多多走过路过，不要错过开业酬宾，好礼多多走过路过，不要错过
|
【本文地址】
公司简介
联系我们