1

我一直在使用 HTML5 和 Css3 来构建动画横幅，但我有一些问题目前无法解决。

下面是一个用于示例的快速代码，假设这是一个分配有图像的 div 层。

首先是不透明度，它一直工作到时间轴动画结束然后重新出现，有没有一种 css 方法来解决这个问题，还是我必须使用 javascript？

其次是转换延迟，我想我可以做一个关键帧延迟并在每次转换之间冻结几秒钟，但它永远不会生效。如果有人可以帮忙，我会很高兴！

@-webkit-keyframes animation {
   0% {
       opacity:1;
       -webkit-animation-timing-function: ease;
       -webkit-transform: translateY(0px);
   }
   50% {
       -webkit-transition-delay:10s;
       opacity:1;
       -webkit-animation-timing-function: ease-in;
       -webkit-transform: translateY(300px);
   }
   100% {
       opacity:0;
       -webkit-animation-timing-function: ease-inout;
       -webkit-transform: translateY(900px);
   }
}
#animation {
   -webkit-animation-delay: 0s;
   -webkit-animation-duration: 6s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: animation
}

首先是delay命令，Transition-delay和animation-delay，两者都有

** * ** * *更新* ** * ** * ** * **

不透明度已解决，要让它在动画结束后完成，请将您的第一帧 0% 设置为不透明度 0。如果这是一个问题，请将一帧设置为 1%，将其设置为不透明度 1。

然后在你的动画末尾添加转发，我一直在做它的速记，就像这样。

#bannerImg {
        -webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out forwards}
4

1 回答 1

0

我找不到让代码看起来很好看的方法，但是由于从动画本身开始延迟和动画似乎不起作用，我将以下内容放在一起：

@-webkit-keyframes animation {
   0% {
       opacity:1;
       -webkit-animation-timing-function: ease;
       -webkit-transform: translateY(0px);
   }
   18.75% {
       opacity:1;
       -webkit-animation-timing-function: ease-in;
       -webkit-transform: translateY(300px);
   }
   81.25% {
       opacity:1;
       -webkit-animation-timing-function: ease-in;
       -webkit-transform: translateY(300px);
   }
   100% {
       opacity:0;
       -webkit-animation-timing-function: ease-inout;
       -webkit-transform: translateY(900px);
   }
}
#animation {
   -webkit-animation-delay: 0s;
   -webkit-animation-duration: 16s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: animation;
}

JSFiddle
此解决方案仅使用18.75%和81.25%作为延迟标记，在此期间（10 秒）没有任何改变。

于 2014-04-11T08:11:32.303 回答