CSS动画滑块

时间:2016-10-28 15:21:33

标签: html css animation sass slider

我正在尝试仅使用CSS制作动画滑块。我有3张想要水平滑动的图片。我的问题是我可以添加它们转换,但没有动画动画必须在每个图像上停止几秒钟。任何人都有想法如何管理它?我用sass。

代码:

.slider {
  position: relative;
  height: 100vh;
  // width: 100vw;
  overflow: hidden;
  display: block;
  .slides {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    transition-timing-function: ease-out;
    animation: slide 3s steps(2) infinite;
    .slide {
      height: 100vh;
      width: 100vw;
      padding: 100px;
      margin: 0 auto;
      float: left;
      text-align: center;
      img {
        margin: 0 auto;
        border-radius: 50%;
        height: 250px;
      }
      h1 {
        color: #323232;
        font-size: 32px;
        line-height: 42px;
        letter-spacing: 1px;
        padding-bottom: 12px;
      }
      h4 {
        font-weight: 200;
        line-height: 32px;
        letter-spacing: 0.9px;
        display: flex;
      }
    }
    //end .slide
    &:after {
      content: "";
      clear: both;
      display: block;
    }
  }
  //end .slides
  @keyframes slide {
    to {
      transform: translateX(-300vw);
    }
  }
}
}
<section class="slider">
  <div class="slides">
    <div class="slide">
      <img src="images/testimonial-img-1.jpg" alt="" />
      <h1>TANYA - Architect</h1>
      <h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
    </div>

    <div class="slide">
      <img src="images/testimonial-img-2.jpg" alt="" />
      <h1>LINDA - City planner</h1>
      <h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
    </div>

    <div class="slide">
      <img src="images/testimonial-img-3.jpg" alt="" />
      <h1>SANDAR - Developer</h1>
      <h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
    </div>
  </div>
</section>

2 个答案:

答案 0 :(得分:0)

你的css,已修复:

.slider{
      position: relative;
      height: 100vh;
      // width: 100vw;
      overflow: hidden;
      display: block;
    }
    .slides{
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        display: flex;
        animation: slide 3s ease-out infinite;    
    }
    .slide{
        height: 100vh;
        width: 100vw;
        padding: 100px;
        margin: 0 auto;
        float: left;
        text-align: center;
    }
    img{
        margin: 0 auto;
        border-radius: 50%;
        height: 250px;
    }

    h1{
        color: #323232;
        font-size: 32px;
        line-height: 42px;
        letter-spacing: 1px;
        padding-bottom: 12px;
    }

    h4{
        font-weight: 200;
        line-height: 32px;
        letter-spacing: 0.9px;
        display: flex;
    }

    &:after{
      content: ""; 
      clear: both; 
      display: block; 
    }

结束}错了。你不能在另一个内部拥有css规则。 如果您使用动画,转换时间也没有做任何事情,您可以将其添加到动画声明中。过渡和动画是两回事。两者都有定时功能,您可以在一行或单独声明。

答案 1 :(得分:0)

试试这个: -

&#13;
&#13;
#outerbox{
	width:700px;
	overflow:hidden;
	
	}
#sliderbox{
	position:relative;
	width:2800px;
	animation:animation 20s infinite;
	
	}
#sliderbox img{
	float:left;
	} 
@keyframes animation{
	0%{
		left:0px;
		}
	100%{
		left:-2800px;	
			}
	
		}
&#13;
<div id="outerbox">
<div id="sliderbox">
<img src="http://labs.qnimate.com/slider/1.jpg"/> 
<img src="http://labs.qnimate.com/slider/2.jpg"/>
<img src="http://labs.qnimate.com/slider/3.jpg"/>
&#13;
&#13;
&#13; 好的,试试这个
&#13;
&#13;
#outerbox{
	width:700px;
	}
#sliderbox{
	position:relative;
	width:2800px;
	animation:animation 20s infinite;
	}
#sliderbox img{
	float:left;
	} 
@keyframes animation{
	0%{
		left:0px;
		}
	20%{
		left:0px;	
			}
	25%{
		left:-700px;	
			}
	45%{
		left:-700px;	
			}
	50%{
		left:-1400px;	
			}
	70%{
		left:-1400px;	
			}
	
		}
&#13;
<div id="outerbox">
<div id="sliderbox">
<img src="http://labs.qnimate.com/slider/1.jpg"/> 
<img src="http://labs.qnimate.com/slider/2.jpg"/>
<img src="http://labs.qnimate.com/slider/3.jpg"/>
 </div>
 </div>
&#13;
&#13;
&#13;