i have keyframe animation works in codepen, , works in web page in every other browser safari (tested 10.1 , tech preview 27). works in chrome, firefox.
it works in safari if switch tab , again.
the scss
.scroller { height: 160px; overflow: hidden; font-family: $font-family-ps-light; font-weight: normal; font-size: 32px; line-height: 40px; color: #ecf0f1; &__container { overflow: hidden; height: 40px; padding: 0 40px; &__text { display: inline; float: left; margin: 0; } &__list { margin-top: 0; padding-left: 140px; text-align: left; list-style: none; animation-name: change; animation-duration: 20s; animation-iteration-count: infinite; &__item { line-height: 40px; margin: 0; } } } } @keyframes change { 0%, 12.66%, 100% {transform:translate3d(0,0,0);} 16.66%, 29.32% {transform:translate3d(0,-25%,0);} 33.32%,45.98% {transform:translate3d(0,-50%,0);} 49.98%,62.64% {transform:translate3d(0,-75%,0);} 66.64%,79.3% {transform:translate3d(0,-50%,0);} 83.3%,95.96% {transform:translate3d(0,-25%,0);} } and html
<div class="scroller"> <div class="scroller__container"> <div class="scroller__container__text"> </div> <ul class="scroller__container__list"> <li class="scroller__container__list__item">more mapping</li> <li class="scroller__container__list__item">canvas design</li> <li class="scroller__container__list__item">maturity reporting</li> <li class="scroller__container__list__item">self-service support</li> </ul> </div> </div> a codepen of @ http://codepen.io/smlombardi/pen/bqjjoq?editors=1100
Comments
Post a Comment