Question

我正在尝试制作动画，以便我的继续 button应来自top，以使animation看起来不错。

下面是我写的主要css（动画没有正确开放）

.gl-mo{
  position: absolute;
  animation: buttonAnimation 3s;
}

.gl-mo button{
   position: relative;
}

@keyframes buttonAnimation{
    0%   {top: 40px;}
    50%  {top: 90px;}
    100% {top: 150px;position: relative;}
}

  html, body {
      height: 100%;
      width: 100%;
  }

  html {
      display: table;
      margin: auto;
  }

.header{
    width: 100%;
    height: 34px;
    background: #3a5795;
    margin-top: 3px;
}

.box-content-wrapper{
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    background: #FFF;
    margin-right: 51px;
    min-width: 497px;
    box-shadow:8px 8px 5px #8E7373;
    border-top: 3px solid #D2CACA;
    margin-bottom: 38px;
}

.box-placement{
  position: relative;
  left: 61px;
}

ol {
  /* Name counter and set it to zero */
  counter-reset: list;
  
  list-style: none;
}

li.status-progress-round{
  /* Increment counter with every li */
 counter-increment: list;
  
  margin-bottom: 10px;
}

li.status-progress-round::before {
  /* Use ::before pseudoelement to show a custom counter with a leading zero */
  content: counter(list, decimal-leading-zero);

  /*background: #2b4353;*/
  
  font-family: Arial, sans-serif;
  color: #fff;
  font-size: 13px;
  text-align: center;

  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  line-height: 2.3em;
  display: inline-block;
  margin-right: 1em;
}

li.status-progress-round.green::before{
   background: #07844B;
}

li.status-progress-round.pending::before{
   background: #2b4353;
}

li.status-progress-round.error::before{
   background: #A11A06;
}

.downloading-status{
    font-size: 17px;
    background: rgba(140, 137, 137, 0.075);
    width: 100%;
    color: #186C7C;
}

.check-placement{
    left: auto;
    /*color: #12A560;*/
    font-size: 20px;
    padding: 16px;
}
.green{
   color: #07844B;
}
.voilet{
  color: #2b4353;
}
.error{
  color: #A11A06;
}
.next-button{
    width: 100%;
    background: #777;
    border: none;
    border-radius: 11px;
    height: 25px;
    color: #fff;
    font-size: 15px;
}

.next-button:hover{
   background: #5394A0;
}

.box-header h4{
   color: #6D5555;
}

.spinnner{
   padding: 42px;
}

/* for animation */

.gl-mo{
  position: absolute;
  animation: buttonAnimation 3s;
}

.gl-mo button{
   position: relative;
}

@keyframes buttonAnimation{
    0%   {top: 40px;}
    50%  {top: 90px;}
    100% {top: 150px;}
}

                   <div class="col-lg-5 box-content-wrapper">
                        <div class="box-header">
                           <h4>Progress Status</h4>
                       </div>
                       <div class="box-body">
                          <ol>
                              <li>Environment</li>
                              <li>downloading</li>
                              <li>installation</li>
                              <li>configuration</li>
                          </ol>
               <div><button class="next-button">Continue</button></div>
                       </div>
                   </div>

Answer 1

您只需将animation添加到自己的按钮

即可

button {
  position: absolute;
  animation: buttonAnimation 3s;
 -webkit-animation: buttonAnimation 3s; /* Safari 4+ */
 -moz-animation:   buttonAnimation 3s; /* Fx 5+ */
 -o-animation:      buttonAnimation 3s; /* Opera 12+ */

}

＆＃13;

      html, body {
          height: 100%;
          width: 100%;
      }

      html {
          display: table;
          margin: auto;
      }

    .header{
        width: 100%;
        height: 34px;
        background: #3a5795;
        margin-top: 3px;
    }

    .box-content-wrapper{
        min-height: 250px;
        padding: 15px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        background: #FFF;
        margin-right: 51px;
        min-width: 497px;
        box-shadow:8px 8px 5px #8E7373;
        border-top: 3px solid #D2CACA;
        margin-bottom: 38px;
    }

    .box-placement{
      position: relative;
      left: 61px;
    }

    ol {
      /* Name counter and set it to zero */
      counter-reset: list;
      
      list-style: none;
    }

    li.status-progress-round{
      /* Increment counter with every li */
     counter-increment: list;
      
      margin-bottom: 10px;
    }

    li.status-progress-round::before {
      /* Use ::before pseudoelement to show a custom counter with a leading zero */
      content: counter(list, decimal-leading-zero);

      /*background: #2b4353;*/
      
      font-family: Arial, sans-serif;
      color: #fff;
      font-size: 13px;
      text-align: center;

      border-radius: 50%;
      width: 2.2em;
      height: 2.2em;
      line-height: 2.3em;
      display: inline-block;
      margin-right: 1em;
    }

    li.status-progress-round.green::before{
       background: #07844B;
    }

    li.status-progress-round.pending::before{
       background: #2b4353;
    }

    li.status-progress-round.error::before{
       background: #A11A06;
    }

    .downloading-status{
        font-size: 17px;
        background: rgba(140, 137, 137, 0.075);
        width: 100%;
        color: #186C7C;
    }

    .check-placement{
        left: auto;
        /*color: #12A560;*/
        font-size: 20px;
        padding: 16px;
    }
    .green{
       color: #07844B;
    }
    .voilet{
      color: #2b4353;
    }
    .error{
      color: #A11A06;
    }
    .next-button{
        width: 100%;
        background: #777;
        border: none;
        border-radius: 11px;
        height: 25px;
        color: #fff;
        font-size: 15px;
    }

    .next-button:hover{
       background: #5394A0;
    }

    .box-header h4{
       color: #6D5555;
    }

    .spinnner{
       padding: 42px;
    }

    /* for animation */
    .box-body{
     position: relative;
   }
    button {
      position: absolute;
      animation: buttonAnimation 3s;
     -webkit-animation: buttonAnimation 3s; /* Safari 4+ */
     -moz-animation:   buttonAnimation 3s; /* Fx 5+ */
     -o-animation:      buttonAnimation 3s; /* Opera 12+ */
   
    }

    .gl-mo button{
       position: relative;
    }

    @keyframes buttonAnimation{
        0%   {top: 40px;}
        50%  {top: 90px;}
        100% {top: 150px;}
    }

＆＃13;

                       <div class="col-lg-5 box-content-wrapper">
                            <div class="box-header">
                               <h4>Progress Status</h4>
                           </div>
                           <div class="box-body">
                              <ol>
                                  <li>Environment</li>
                                  <li>downloading</li>
                                  <li>installation</li>
                                  <li>configuration</li>
                              </ol>
                   <div><button class="next-button">Continue</button></div>
                           </div>
                       </div>

＆＃13;

为什么关键帧动画没有按照需要发生

1 个答案: