This is the news div with bottom to top scrolling, but it is slow to start scrolling. I want to increase the speed. The current behavior is the div appears from the y-axis of the system, but I want it to start exactly where I define. The scrolling div is nested inside another div, but the animation starts at the bottom of the screen. It should actually start from inside the specific div.
.example1 {
-moz-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%);
-moz-animation: example1 2s linear infinite;
-webkit-animation: example1 2s linear infinite;
animation: example1 70s linear infinite;
}
@-moz-keyframes example1 {
0% {
-moz-transform: translateY(10%);
}
100% {
-moz-transform: translateY(-10%);
}
}
@-webkit-keyframes example1 {
0% {
-webkit-transform: translateY(10%);
}
100% {
-webkit-transform: translateY(-10%);
}
}
@keyframes example1 {
0% {
-moz-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(50%);
}
100% {
-moz-transform: translateY(-10%);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
}
<?php
$upcoming_news = $this->mastermodel->get_upcoming_news();
?>
<div class="example1" id="example1">
<ul <?php if($this->lang->lang()=='ar') { ?> dir="RTL"
<?php } ?>>
<?php
foreach ($upcoming_news as $row) {
if ($this->lang->lang() == 'ar')
$news = $row['news_description_ar'];
else
$news = $row['news_description_en'];
?>
<li <?php if($this->lang->lang()=='ar') { ?> dir="RTL" style="text-align:right"
<?php } ?>>
<?= $news; ?> <br />
</li>
<?php } ?>
</ul>
</div>