Question

我有以下内容，效果很好，但这是我第一次尝试css动画。如何在动画中添加另一个步骤？我想要做的是让消息一个淡出或消失，消息两个弹出然后滚动出来，这样就形成了一个很好的循环。

<style style="text/css">

    .scroll-left {
         height: 50px;  
         overflow: hidden;
         position: relative;
         background:black;
         color: white;
         border: 1px solid white;
         font-size: 32px;
         font-style: italic; 
    }

    .scroll-left p 

     {
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         line-height: 50px;
         text-align: center;

         /* Starting position */
         transform:translateX(100%);

         /* Apply animation to this element */  
         animation: scroll-left 8s linear infinite;
    }

    @keyframes scroll-left {
        0%   
        { 
             -moz-transform: translateX(100%); /* Browser bug fix */
             -webkit-transform: translateX(100%); /* Browser bug fix */
             transform: translateX(100%);       
         }

         100% 
        { 
         -moz-transform: translateX(2%); /* Browser bug fix */
         -webkit-transform: translateX(2%); /* Browser bug fix */
         transform: translateX(2%); 
        }
    }
</style>

<div class="scroll-left">
    <p>
        <span style="color:#841214">Message One</span>  
        <!-- Message Two -->
    </p>
</div>

我意识到我需要在不同的关键帧％s处使用不同的步骤，但是我不确定当在同一区域中动画多个项目时它是如何工作的。

我试过这个让第一条消息淡出：

@keyframes scroll-left 
    {
        /* Move it left */
        0%   
        { 
             transform: translateX(100%);       
         }

        /* Stop It */
        25% 
        { 
            transform: translateX(0%); 
             opacity:100;
        }

        /* fade out */
        40% 
        { 
             visibility: hidden;
             opacity:0;
             transition: visibility 0s 2s, opacity 2s linear;
             transform: translateX(0%); 
        }

        100%
        {
            visibility: hidden;
            opacity:0;
            transition: visibility 0s 2s, opacity 2s linear;
            transform: translateX(0%); 
        }
    }

但它只是消失而且不会褪色。

Answer 1

您只需为要设置动画的任何属性指定开始和结束值。在这种情况下，opacity应该就是您所需要的。

.scroll-left {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: black;
  color: white;
  border: 1px solid white;
  font-size: 32px;
  font-style: italic;
}

.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  /* Starting position */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-left 5s linear infinite;
  -webkit-animation: scroll-left 5s linear infinite;
  animation: scroll-left 5s linear infinite;
}

@keyframes scroll-left {
  /* Move it left */
  0% {
    transform: translateX(100%);
  }
  /* Stop It */
  25% {
    transform: translateX(0%);
  }
  /* fade out */
  40% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
}

<div class="scroll-left">
  <p>
    <span style="color:#841214">Message One</span>
    <!-- Message Two -->
  </p>
</div>

为css动画添加另一个步骤

1 个答案: