Question

我试图制作较低三分之一的动画。我准备好了图像，但我不确定如何使用CSS动画在两个图像之间切换。动画将是无限循环的，我将在动画中以X％的百分比将image01的不透明度更改为100％，在动画的Y％中将image02更改为100％。我要对它进行动画设置，以便它来自屏幕的左侧，以及之后为什么我有<＃39; 左：-1229px; ＆＃39;下面的css代码。

Div设置：

<body>
    <div id="cf">
        <div class="l_com"></div>
        <div class="l_cha"></div>
    </div>
</body>

我使用此css代码设置图片:(我将动画＆＃39;离开＆＃39;稍后）

.l_com{
    background-image: url(/img/image01.png);
    width: 1229px;
    height: 108px;
    position: absolute;
    /*left: -1229px;*/
    opacity: 100;

}
.l_cha{
    background-image: url(/img/image02.png);
    width: 1229px;
    height: 108px;
    position: absolute;
    /*left: -1229px;*/
    opacity: 100;

}

现在，为了测试，我使用这个CSS代码让动画能够快速查看并在出现问题时进行更改：

#cf{
    -webkit-transition: all 60s ease-in;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: animation;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 9s;    
}

所以动画的名称是动画＆＃39;。有没有一种方法可以使用id＆＃39; cf＆＃39;来为主div中的特定div设置动画。我测试过的代码就是这个（不，我根本不认为它是正确的，但是我只是把它放在这里，这样你就可以更好地了解我想要的东西了。做）

@keyframes animation {
  0% {
   .l_com.opacity: 0; 
  }
  20% {
    .l_com.opacity: 0; 
  }
  21% {
    .l_com.opacity: 100;
  }
  25% {
    .l_com.opacity: 100;
  }
  26% {
    .l_com.opacity: 0;
  }  

  40% {
    .l_cha.opacity: 0; 
  }
  41% {
    .l_cha.opacity: 100;
  }
  45% {
    .l_cha.opacity: 100;
  }
  46% {
    .l_cha.opacity: 0;
  }     
  100% {    
  }
}

Answer 1

以下是animation-duration: 3s和animation-delay: 8s的示例。

如果您看到@keyframes规则，则会发现不透明度从0%到36.36%以及从63.63%到100%保持不变。这是延迟（每个4s）。剩下的就是动画发生的时候。

   0%   9.09%  18.18% 27.27% 36.36% 45.45% 54.54% 63.63% 72.72% 81.81%  100%

   1s     2s     3s     4s     5s     6s     7s     8s     9s    10s    11s
+------+------+------+------+------+------+------+------+------+------+------+  
|      |      |      |      ||||||||||||||||||||||      |      |      |      |  
|      |      |      |      ||||||||||||||||||||||      |      |      |      |  
+------+------+------+------+------+------+------+------+------+------+------+  
 9.09%  9.09%  9.09%  9.09%  9.09%  9.09%  9.09%  9.09%  9.09%  9.09%  9.09% <------------+
^                           ^                    ^                           ^            |
|                           |                    |                           |            |
+-----------36.36%----------+-------27.27%-------+----------36.36%-----------+ <------+   |
|                           |                    |                           |        |   |
0%                        36.36%               63.63%                      100% <-+   |   |
^                           ^                    ^                           ^    |   |   |
|                           |                    |                           |    |   |   |
+-----------delay-----------+-----animation------+-----------delay-----------+    |   |   |
^                           ^      duration      ^                           ^    |   |   |
|                           |                    |                           |    |   |   |
|                           |                    |                           |    |   |   |
+-----show first image------+-------change-------+-----show second image-----+    |   |   |
                                    image                                         |   |   |
                                                                                  |   |   |
                                                                                  |   |   |
                           +-----------------------------+                        |   |   |
                           |  - 0% + 36.36% = 36.36%     |                        |   |   |
                           |  - 36.36% + 27.27% = 63.63% | <----------------------+   |   |
                           |  - 54.54% + 36.36% = 100%   |                            |   |
                           +-----------------------------+                            |   |
                           |  - 9.09% x 4 = 36.36%       |                            |   |
                           |  - 9.09% x 3 = 27.27%       | <--------------------------+   |
                           +-----------------------------+                                |
                           |  - 100% / 11s = 9.09%       | <------------------------------+
                           +-----------------------------+

＆＃13;

#container {
  position: relative;
  width: 250px;
  height: 250px;
}
#container div {
  position: absolute;
  width: 250px;
  height: 250px;
  opacity: 0;
  background-image: url(http://s25.postimg.org/6gpp81xn3/fff.png);
}
#container div.bottom {
  opacity: 1;
  background-image: url(http://s25.postimg.org/jwcpxi64v/fff.png);
}
#container div.top {
  -webkit-animation: anim 11s infinite alternate;
  animation: anim 11s infinite alternate;
}
@-webkit-keyframes anim {
  0% {
    opacity: 0;
  }
  36.36% {
    opacity: 0;
  }
  63.63% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim {
  0% {
    opacity: 0;
  }
  36.36% {
    opacity: 0;
  }
  63.63% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<div id="container">
  <div class="bottom"></div>
  <div class="top"></div>
</div>

＆＃13;

CSS动画在两个图像之间切换

1 个答案: