<header class="header ticker-wrapper">
<div class="ticker-wrapper__first-half">
<img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
<p>просто для новичков, выгодно для каждого</p>
<img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
<p>просто для новичков, выгодно для каждого</p></div>
<div class="ticker-wrapper__second-half">
<img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
<p>просто для новичков, выгодно для каждого</p>
<img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
<p>просто для новичков, выгодно для каждого</p>
</div>
</header>
.header {
background: #212121;
overflow: hidden;
height: 65px;
position: relative;
div {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
overflow: hidden;
width: 100%;
height: 65px;
transform: translate(100%, 0);
p {
font-family: 'Roboto', sans-serif;
color: #fff339;
text-transform: uppercase;
}
img{
height: 60px;
}
}
$duration: 30s;
.ticker-wrapper__first-half, .ticker-wrapper__second-half {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
top: 0;
right: 0;
animation: ticker $duration infinite linear forwards;
}
.ticker-wrapper__second-half {
animation: $duration ticker $duration/2 infinite linear forwards;
}
}
@keyframes ticker {
0% {
transform: translate(100%, 0);
}
50% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.