Css помощь, при прокрутке слов они зациклены, мне нужно что бы анимация останавливалась на последнем слове, как это сделать?

Question

[swks]

есть код codepen.io/yoannhel/pen/sJpDj

при прокрутке слов они зациклены, мне нужно что бы анимация останавливалась на последнем слове, подскажите пожалуйста как это сделать, что поменять

Answer 1

[Pavel]

Если по быстрому ... поменяйте css на этот

body {
  width:100%;
  height:100%;
  position:fixed;
  background-color:#34495e;
}

.content {
  width:237px;
  font-size:36px;
  line-height:40px;
  font-family:'Muli';
  color:#ecf0f1;
  height:40px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-15px;
  margin-left:-118px;
  
  &:before {
    content:'[';
    position:absolute;
    left:-30px;
    line-height:40px;
  }
  &:after {
    content:']';
    position:absolute;
    right:-30px;
    line-height:40px;
  }
  &:after, &:before {
    color:#16a085;
    font-size:42px;
    animation:2s linear 0s normal none  opacity;
    -webkit-animation:2s ease-out 0s normal none  opacity;
    -moz-animation:2s ease-out 0s normal none  opacity;
    -o-animation:2s ease-out 0s normal none  opacity;
  }
}

.visible {
  float:left;
  font-weight:600;
  overflow:hidden;
  height:40px;   
}

p {
  display:inline;
  float:left;
  margin:0;
}

ul {
  margin-top:0;
  padding-left:110px;
  text-align:left;
  list-style:none;
  animation:6s linear 0s normal none  change;
  -webkit-animation:6s linear 0s normal none  change;
  -moz-animation:6s linear 0s normal none  change;
  -o-animation:6s linear 0s normal none  change;
}

ul li {
  line-height:40px;
  margin:0;
}

@-webkit-keyframes opacity {
  0%   {opacity:0;}
  100%  {opacity:1;}
    
}
@keyframes opacity {
  0%   {opacity:0;}  
  100% {opacity:1;}
}

@-webkit-keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-80px;}
  85%  {margin-top:-80px;}
  100% {margin-top:-80px;}
}
@keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-80px;}
  85%  {margin-top:-80px;}
  100% {margin-top:-80px;}
}

Comments

[Pavel]

codepen.io/anon/pen/yNwGej

[swks]

Pavel: в любом случае будет возвращаться на начальное слово ?

[Pavel]

swks: сорри, не углядел )

[swks]

Pavel: поправишь ? если не тяжело конечно

[Pavel]

swks: обновил codepen.io/anon/pen/yNwGzR

[swks]

Pavel: спасибо огромное, все отлично работает, понял в чем соль ))

[Pavel]

swks: have a nice day )