如何循环这个css滑块动画? [英] How to loop this css slider animation?

查看：44
本文介绍了如何循环这个css滑块动画?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个 css 滑块，到目前为止我只成功地让它正确迭代了一次.有没有办法让它无限循环而不改变最终结果?

<div class="slides"><div class="slider-1"></div><div class="slider-2"></div><div class="slider-3"></div><div class="slider-4"></div>

CSS

.slider{宽度:700px；高度:300px；边距:50px 自动；边框:1px 实心；溢出:隐藏；}.幻灯片{宽度:400%；高度:100%；-webkit-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;-moz-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;动画:slide-1 2s linear 4s 1 forwards，slide-2 2s linear 8s 1 forwards，slide-3 2s linear 12s 1 forwards，slide-4 2s linear 16s 1 forwards；}.slider-1、.slider-2、.slider-3、.slider-4{宽度:25%；高度:100%；向左飘浮;}.slider-1{背景:#222;}.slider-2{背景:#444;}.slider-3{背景:#666;}.slider-4{背景:#888;}@-webkit-keyframes 幻灯片 1{从{margin-left:0px;}到{margin-left:-100%;}}@-webkit-keyframes 幻灯片 2{从{margin-left:-100%;}到{margin-left:-200%;}}@-webkit-keyframes 幻灯片 3{从{margin-left:-200%;}到{margin-left:-300%;}}@-webkit-keyframes 幻灯片 4{从{margin-left:-300%;}到{margin-left:0%;}}@-moz-keyframes 幻灯片 1{从{margin-left:0px;}到{margin-left:-100%;}}@-moz-keyframes 幻灯片 2{从{margin-left:-100%;}到{margin-left:-200%;}}@-moz-keyframes 幻灯片 3{从{margin-left:-200%;}到{margin-left:-300%;}}@-moz-keyframes 幻灯片 4{从{margin-left:-300%;}到{margin-left:0%;}}@关键帧幻灯片1{从{margin-left:0px;}到{margin-left:-100%;}}@关键帧幻灯片2{从{margin-left:-100%;}到{margin-left:-200%;}}@关键帧幻灯片3{从{margin-left:-200%;}到{margin-left:-300%;}}@关键帧幻灯片4{从{margin-left:-300%;}到{margin-left:0%;}}

http://jsfiddle.net/1kcbpqfu/

解决方案

据我所知，不能嵌套多个动画并添加 animation-iteration-count 属性.它将单独重复每个动画.

但是，如果你只做一个动画，你可以将它设置为无限重复，就像这样:

.slider{宽度:700px；高度:300px；边距:50px 自动；边框:1px 实心；溢出:隐藏；}.幻灯片{宽度:400%；高度:100%；-webkit-animation:slide 16s 无限；-moz-animation:slide 16s 无限；动画:无限滑动16s；}.slider-1、.slider-2、.slider-3、.slider-4{宽度:25%；高度:100%；向左飘浮;}.slider-1{背景:#222;}.slider-2{背景:#444;}.slider-3{背景:#666;}.slider-4{背景:#888;}@-webkit-keyframes 幻灯片{0%,100% {左边距:0%；}12%{左边距:0%；}24% {左边距:-100%；}36% {左边距:-100%；}48% {左边距:-200%；}60%{左边距:-200%；}72% {左边距:-300%；}84% {左边距:-300%；}}@-moz-keyframes 幻灯片{0%,100% {左边距:0%；}12%{左边距:0%；}24% {左边距:-100%；}36% {左边距:-100%；}48% {左边距:-200%；}60%{左边距:-200%；}72% {左边距:-300%；}84% {左边距:-300%；}}@关键帧幻灯片{0%,100% {左边距:0%；}12%{左边距:0%；}24% {左边距:-100%；}36% {左边距:-100%；}48% {左边距:-200%；}60%{左边距:-200%；}72% {左边距:-300%；}84% {左边距:-300%；}}

<div class="slides"><div class="slider-1"></div><div class="slider-2"></div><div class="slider-3"></div><div class="slider-4"></div>

这是一个 JSFiddle:http://jsfiddle.net/1kcbpqfu/2/

百分比由

计算

Time_of_property_change/Time_of_whole_animation

这意味着，如果我想要一个 10 秒的动画，帧之间的过渡时间为 3 秒，持续时间为 2 秒，然后在 8 秒内回到拳头位置，那么 CSS 动画帧应该如下所示:

0%, 100% {/* 动画开始和结束 */左边距:0%；}30% {/* 开始过渡左边距:0%；/* 直到 3 秒，保持同一帧 */}50% {/* 过渡结束 */左边距:-100%；/* 在 5 秒内，完成动画80% {/* 在 8 秒内，开始过渡到第一帧 */左边距:-100%；}

I'm trying to create a css slider, So far i was only successful to get it to iterate correctly for only one time. Is there a way to make it loop infinitely without changing the final result?

<div class="slider">
<div class="slides">
<div class="slider-1"></div>
<div class="slider-2"></div>
<div class="slider-3"></div>
<div class="slider-4"></div>
</div>
</div>

Css

.slider{
  width:700px;
  height:300px;
  margin:50px auto;
  border:1px solid;
  overflow:hidden;
}
.slides{
  width:400%;
  height:100%;
  -webkit-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;
  -moz-animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;
  animation:slide-1 2s linear 4s 1 forwards, slide-2 2s linear 8s 1 forwards, slide-3 2s linear 12s 1 forwards, slide-4 2s linear 16s 1 forwards;
}
.slider-1, .slider-2, .slider-3, .slider-4{
  width:25%;
  height:100%;
  float:left;
}
.slider-1{
  background:#222;
}
.slider-2{
  background:#444;
}
.slider-3{
  background:#666;
}
.slider-4{
  background:#888;
}

@-webkit-keyframes slide-1{
  from{margin-left:0px;}
  to{margin-left:-100%;}
}
@-webkit-keyframes slide-2{
  from{margin-left:-100%;}
  to{margin-left:-200%;}
}
@-webkit-keyframes slide-3{
  from{margin-left:-200%;}
  to{margin-left:-300%;}
}
@-webkit-keyframes slide-4{
  from{margin-left:-300%;}
  to{margin-left:0%;}
}
@-moz-keyframes slide-1{
  from{margin-left:0px;}
  to{margin-left:-100%;}
}
@-moz-keyframes slide-2{
  from{margin-left:-100%;}
  to{margin-left:-200%;}
}
@-moz-keyframes slide-3{
  from{margin-left:-200%;}
  to{margin-left:-300%;}
}
@-moz-keyframes slide-4{
  from{margin-left:-300%;}
  to{margin-left:0%;}
}
@keyframes slide-1{
  from{margin-left:0px;}
  to{margin-left:-100%;}
}
@keyframes slide-2{
  from{margin-left:-100%;}
  to{margin-left:-200%;}
}
@keyframes slide-3{
  from{margin-left:-200%;}
  to{margin-left:-300%;}
}
@keyframes slide-4{
  from{margin-left:-300%;}
  to{margin-left:0%;}
}

http://jsfiddle.net/1kcbpqfu/

解决方案

As far as I know, you can't nest more than one animation and add the animation-iteration-count property. It will repeat every animation individually.

However, if you do just one animation, you can set it to repeat infinitely, like this:

.slider{
    width:700px;
    height:300px;
     margin:50px auto;
    border:1px solid;
    overflow:hidden;
}
.slides{
    width:400%;
     height:100%;
     -webkit-animation:slide 16s infinite;
     -moz-animation:slide 16s infinite;
     animation:slide 16s infinite;
}
.slider-1, .slider-2, .slider-3, .slider-4{
    width:25%;
    height:100%;
    float:left;
}
.slider-1{
    background:#222;
}
.slider-2{
    background:#444;
}
.slider-3{
    background:#666;
}
.slider-4{
    background:#888;
}

@-webkit-keyframes slide{
    0%,100% {
        margin-left:0%;
    }

    12% {
        margin-left:0%;
    }

    24% {
        margin-left:-100%;
    }

    36% {
        margin-left:-100%;
    }

    48% {
        margin-left:-200%;
    }

    60% {
        margin-left:-200%;
    }

    72% {
        margin-left:-300%;
    }

    84% {
        margin-left:-300%;  
    }
}
@-moz-keyframes slide{
    0%,100% {
        margin-left:0%;
    }

    12% {
        margin-left:0%;
    }

    24% {
        margin-left:-100%;
    }

    36% {
        margin-left:-100%;
    }

    48% {
        margin-left:-200%;
    }

    60% {
        margin-left:-200%;
    }

    72% {
        margin-left:-300%;
    }

    84% {
        margin-left:-300%;  
    }
}
@keyframes slide{
    0%,100% {
        margin-left:0%;
    }

    12% {
        margin-left:0%;
    }

    24% {
        margin-left:-100%;
    }

    36% {
        margin-left:-100%;
    }

    48% {
        margin-left:-200%;
    }

    60% {
        margin-left:-200%;
    }

    72% {
        margin-left:-300%;
    }

    84% {
        margin-left:-300%;  
    }
}

<div class="slider">
    <div class="slides">
        <div class="slider-1"></div>
        <div class="slider-2"></div>
        <div class="slider-3"></div>
        <div class="slider-4"></div>
    </div>
</div>

Here is a JSFiddle: http://jsfiddle.net/1kcbpqfu/2/

EDIT: The percentages are calculated by

Time_of_property_change/Time_of_whole_animation

It means, if I want an 10 second animation, with a transition between frames in 3s with a 2s of duration, and in 8s back to the fist position, the CSS animation frame should look like:

0%, 100% { /* Beggining and end of animation */
    margin-left: 0%;
}

30% { /* Beggining of transition
    margin-left: 0%; /* Until 3 seconds, keep same frame */
}

50% { /* End of transition */
    margin-left: -100%; /* in 5 seconds, finish animation

80% { /* In 8 seconds, start transition to first frame */
    margin-left: -100%;
}

这篇关于如何循环这个css滑块动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆