foreach using css3

Question

foreach using css3

Navigation

#1 by (4 votes)

2

So I have a div with 3 imagens

<div class="pai">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
</div>

I would like these 3 images to run from right to left in order until they reach their positions, and when they do, stop there.

But I wish they would not go out all together. I would like the second to have a time of about 2 seconds after the first one.

Thinking about it, I came up with the idea of using foreach . But can you implement this in css3 ? how?

The template I just made them go into sequence.

Note: NOT I would like to use JavaScript. I want to use CSS only.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
.pai {  
    width: 1000px;
    height:300px;
    position: relative;
    overflow: hidden;
}

.pai > img {
    width: 10%;
    position:relative;
    animation: animacao 5s;
    animation-delay: 3s;
    animation-direction: alternate;
}


@keyframes animacao{
    0%   {left: 110%; top: 0px;}
    100% {left: 0px; top: 0px;}
}

</style>
</head>
<body>

  <div class="pai"> 
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>

</body>
</html>

css css3

asked by anonymous 08.02.2017 / 12:56

1 answer

What is the class to draw circle on Android? How does the frame-pointer work?

score 4 · Accepted Answer

This code does not use JS, however you need to create the DELAY for each item, with SASS it would be possible to make N items easily. I added Javascript to make the elements appear only when the page scrolls.

$( window ).scroll(function() {
		if($( window ).scrollTop() > $('#pai').offset().top - 300) 	           $('#pai').addClass("pai");
	});

#rolagem {
  width: 100%;
  height: 800px;
  background: #CCC;
}

#pai {
  width: 1000px;
  height:300px;
  position: relative;
  overflow: hidden;
}

img {
  display: none;
}

.pai > img {
  display: inline-block;
  width: 10%;
  position:relative;
  animation: animacao 3s;
  animation-fill-mode: forwards;
}

.pai > img:nth-child(2) {
  animation-delay: 2s;
  left: 110%;
}

.pai > img:nth-child(3) {
  animation-delay: 4s;
  left: 110%;
}

@keyframes animacao{
    0%   {left: 110%; top: 0px; opacity: 0;}
    55%  {opacity: 0;}
    100% {left: 0px; top: 0px; opacity: 1}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="rolagem"></div>

<div id="pai"> 
    <img src="http://www.suasletras.com/fotos_artista/637eacb259910a2df5bde545f367ab77.jpg"><imgsrc="http://www.suasletras.com/fotos_artista/637eacb259910a2df5bde545f367ab77.jpg"><imgsrc="http://www.suasletras.com/fotos_artista/637eacb259910a2df5bde545f367ab77.jpg">
  </div>