Make News Ticker Pure use CSS3

Setelah berbagi tutorial bagaimana cara membuat recent post with news ticker style use jquery, kini saatnya sharing trick bikin CSS rotator or news ticker murni menggunakan CSS3. Jadi jika sobat memiliki elemen unordered <ul> or ordered <ol> lists, dengan trik sekarang ini bisa ditampilkan menyerupai news ticker use jQuery. Tetapi tidak menutup kemungkinan elemen lain pun dapat diikursertakan yang penting berupa deretan kalimat.

.news {
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 350px;
height: 30px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
padding: 3px;
-webkit-user-select: none;
-moz-user-select: none;
}
.news span {
float: left;
color: #fff;
padding: 6px;
position: relative;
top: -1%;
border-radius: 4px;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
cursor: pointer;
}
.news ul {
float: left;
padding-left: 20px;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-webkit-user-select: none;
-moz-user-select: none;
}
.news ul li {line-height: 30px; list-style: none }

.news ul li a {
color: #fff;
text-decoration: none;
font: 14px Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
}
.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }
@keyframes ticker {
0% {margin-top: 0}
25% {margin-top: -30px}
50% {margin-top: -60px}
75% {margin-top: -90px}
100% {margin-top: 0}
}

Itu CSS basic. Jika sobat ingin tambahkan background-color, silahkan tambahkan kode CSS berikut.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #d23435 }
.red span { background: #c22b2c }
.green { background: #699B67 }
.green span { background: #547d52 }
.magenta { background: #b63ace }
.magenta span { background: #842696 }

<div class="news">
<span>Latest News</span>
<ul>
<li><a href="#">Text 1 - Short Description</li>
<li><a href="#">Text 2 - Short Description</a></li>
<li><a href="#">Text 3 - Short Description</a></li>
<li><a href="#">Text 4 - Short Description</a></li>
</ul>
</div>

Itu jiga sobat pakai CSS basic tanpa warna. Kalau mau pakai warna tinggal tambahkan pada syntax <div class="news"> manjadi <div class="news blue/red/green/magenta">

<div class="news red">
<span>Latest News</span>
<ul>
<li><a href="#">Text 1 - Short Description</li>
<li><a href="#">Text 2 - Short Description</a></li>
<li><a href="#">Text 3 - Short Description</a></li>
<li><a href="#">Text 4 - Short Description</a></li>
</ul>
</div>

DONE.

Resources:
codepen.io/jakecode/pen/wrtdc, codepen.io/ManarKamel/pen/HGjfs, cssdeck.com/labs/css-news-ticker
Bonus:
www.cssscript.com/create-a-simple-news-ticker-using-pure-css-css3, www.cssscript.com/pure-css-css3-text-rotator

Happy coding \m/