我正在尝试仅使用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>
答案 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)
试试这个: -
#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;
#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;