Question

我有这个demo in code笔我想为浮动框添加淡入效果和淡出效果，但每次我添加＆＃34; .webkit-animation：fadein＆＃34;或淡出动画元素停止工作。

e.g。

val items = List("a", "b", "c").mkString("\"","\",\"","\"")

sqlContext.sql("select c1 from table")
          .filter($"c1".isin(items))
          .collect
          .foreach(println)

Answer 1

我认为您需要同时定义动画。您不能简单地在其中一个n-child div中定义-webkit-animation: fadein 5s;，因为这会覆盖您在li s本身上设置的方形动画。

此外，尝试定义fadein和fadeout动画，就像你定义了正方形动画一样：

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

我编辑了您的codepen：http://codepen.io/anon/pen/jbWEQv?editors=110。它有square动画与fadein和fadeout动画配合使用，但您需要修复时间因为每个方格都有特殊的时间而且我没有t单独更改它们。

要看的主要内容是我在css底部创建的新fadein / out定义，以及第155和156行的代码：

-webkit-animation: fadein 12s infinite, square 24s infinite, fadeout 12s 12s infinite;
animation:         fadein 12s infinite, square 24s infinite, fadeout 12s 12s infinite;

如何在CSS动画中添加淡入和淡出效果没有javascript？

1 个答案: