Question

我一直在使用HTML5和Css3制作动画横幅广告，但我有一些问题，目前无法找到解决方法。

下面是一段代码用于示例，想象一下这是一个div图层，并为其分配了图像。

首先是Opacity，它一直有效，直到时间轴动画结束然后重新出现，是否有一种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
}

FIrst off是延迟命令，Transition-delay和animation-delay，两者都是

的的 ** * ** * * 更新< / EM> * ** * ** * ** * **

不透明度已解决，要在动画完成后完成，请将第一帧0％设置为不透明度0.如果这是一个问题，请将帧设置为1％，将其设置为不透明度1.

然后在你的动画结束时添加前进，我一直在做它的简写，就像这样。

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

Answer 1

我找不到一种让代码看起来很漂亮的方法，但是由于动画本身的启动延迟和动画似乎不起作用，我将以下内容粘在一起：

@-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秒）不做任何更改。

每个定义的时间延迟关键帧并在动画后保持不透明度0

1 个答案: