Question

好的，所以我对css3动画很陌生，我正试着去掌握它。所以我想要做的是动画两个图像，一个从底部滑动，另一个从右侧滑入，然后重复此操作。我的图像滑动正常，但我无法工作的是在最后一个结束后重复第一个动画。

以下是我在分钟时的css：

.image-1{
    -webkit-animation-iteration-count :  infinite;
    float:right;    
    animation-name: slideUp, hide;
    -webkit-animation-name: slideUp, hide;
    -moz-animation-name: slideUp, hide;
    animation-duration: 1s, 6s; 
    -webkit-animation-duration: 1s, 6s;
    -moz-animation-duration: 1s, 6s;
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;   
    opacity: 0;
    }

.image-2{
    float:right;
    animation-name: slideLeft, hide;
    -webkit-animation-name: slideLeft, hide;    
    animation-duration: 1s, 6s; 
    -webkit-animation-duration: 1s, 6s;
    -moz-animation-duration: 1s, 6s;
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
    animation-delay:6s, 6s;
    -moz-animation-delay:6s, 6s;
    -webkit-animation-delay:6s, 6s;
    -o-animation-delay:6s, 6s;
    opacity: 0;
    }

@keyframes hide
  { 
      from { opacity: 1; } to { opacity: 1 }
  }
  @-moz-keyframes hide
  { 
      from { opacity: 1; } to { opacity: 1 }
  }
  @-webkit-keyframes hide
  { 
      from { opacity: 1; } to { opacity: 1 }
  }
  @-o-keyframes hide
  { 
      from { opacity: 1; } to { opacity: 1 }
  }

/*
==============================================
slideUp
==============================================
*/

@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0.0;               
    }
    50%{
        transform: translateY(-2%); 
        opacity: 1;         
    }
    65%{
        transform: translateY(4%);
        opacity: 1;     
    }
    80%{
        transform: translateY(-1%);
        opacity: 1;     
    }
    95%{
        transform: translateY(2%);
        opacity: 1;     
    }           
    100% {
        transform: translateY(0%);
        opacity: 1;     
    }   

}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0.0;
    }
    50%{
        -webkit-transform: translateY(-3%);
        opacity: 1; 
    }
    65%{
        -webkit-transform: translateY(5%);
        opacity: 1; 
    }
    80%{
        -webkit-transform: translateY(-1%);
        opacity: 1; 
    }
    95%{
        -webkit-transform: translateY(2%);
        opacity: 1; 
    }           
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;     
    }   
}


/*
==============================================
slideLeft
==============================================
*/

@keyframes slideLeft {
    0% {
        transform: translateX(150%);    
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);  
    }
    80%{
        transform: translateX(-4%); 
    }
    95%{
        transform: translateX(2%);
    }           
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }           
    100% {
        -webkit-transform: translateX(0%);

    }

}

Answer 1

您可以使用

开始延迟重复动画（此延迟应该是您的第一个动画拍摄的时间）

animation-delay:2s;

然后使用

重复一遍

animation-iteration-count:infinite;

你可以在这里找到一个包含所有css3动画属性的好例子： http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4

css3动画链接和重复

1 个答案: