* { box-sizing: border-box; }
\n$duration: 30s;<\/p>\n
@-webkit-keyframes ticker {
\n 0% {
\n -webkit-transform: translate3d(0, 0, 0);
\n transform: translate3d(0, 0, 0);
\n visibility: visible;
\n }<\/p>\n
100% {
\n -webkit-transform: translate3d(-100%, 0, 0);
\n transform: translate3d(-100%, 0, 0);
\n }
\n}<\/p>\n
@keyframes ticker {
\n 0% {
\n -webkit-transform: translate3d(0, 0, 0);
\n transform: translate3d(0, 0, 0);
\n visibility: visible;
\n }<\/p>\n
100% {
\n -webkit-transform: translate3d(-100%, 0, 0);
\n transform: translate3d(-100%, 0, 0);
\n }
\n}<\/p>\n
.ticker-wrap {<\/p>\n
position: fixed;
\n bottom: 0;
\n width: 100%;
\n overflow: hidden;
\n height: 4rem;
\n background-color: rgba(#000, 0.9);
\n padding-left: 100%;
\n box-sizing: content-box;<\/p>\n
.ticker {<\/p>\n
display: inline-block;
\n height: 4rem;
\n line-height: 4rem;
\n white-space: nowrap;
\n padding-right: 100%;
\n box-sizing: content-box;<\/p>\n
-webkit-animation-iteration-count: infinite;
\n animation-iteration-count: infinite;
\n -webkit-animation-timing-function: linear;
\n animation-timing-function: linear;
\n -webkit-animation-name: ticker;
\n animation-name: ticker;
\n -webkit-animation-duration: $duration;
\n animation-duration: $duration;<\/p>\n
&__item {<\/p>\n
display: inline-block;<\/p>\n
padding: 0 2rem;
\n font-size: 2rem;
\n color: white; <\/p>\n
}<\/p>\n
}<\/p>\n
}<\/p>\n
body { padding-bottom: 5rem; }
\nh1,h2,p {padding: 0 5%;}<\/p>","protected":false},"excerpt":{"rendered":"
* { box-sizing: border-box; } $duration: 30s; @-webkit-keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%,<\/p>\n