Как остановить анимацию css3 в конце?

Im, играющий с css3 translateY, и я не abel, чтобы остановить анимацию в конце.Как остановить анимацию css3 в конце?

HTML:

<ul id="nav" class="nav-ctn"> 
    <li><a href="?type=about">About</a></li> 
    <li><a href="?type=projects">Projects</a></li> 
    <li><a href="?type=media">Media</a></li> 
    <li><a href="?type=schedule">Schedule</a></li> 
    <li><a href="?type=contact">Contact</a></li> 
</ul>

CSS:

.tr-up { 
     -moz-animation: tr-up 0.5s ease-in-out; 
     -o-animation: tr-up 0.5s ease-in-out; 
     -webkit-animation: tr-up 0.5s ease-in-out; 
     animation: tr-up 0.5s ease-in-out; 
     -moz-animation-fill-mode: forwards; 
     -o-animation-fill-mode: forwards; 
     -webkit-animation-fill-mode: forwards; 
     animation-fill-mode: forwards; 
    } 


    @-moz-keyframes tr-up { 
     from { 
      -moz-transform: translateY(0); 
      -ms-transform: translateY(0); 
      -o-transform: translateY(0); 
      -webkit-transform: translateY(0); 
      transform: translateY(0); 
     } 

     to { 
      -moz-transform: translateY(-3px); 
      -ms-transform: translateY(-3px); 
      -o-transform: translateY(-3px); 
      -webkit-transform: translateY(-3px); 
      transform: translateY(-3px); 
     } 
    } 

    @-webkit-keyframes tr-up { 
     from { 
      -moz-transform: translateY(0); 
      -ms-transform: translateY(0); 
      -o-transform: translateY(0); 
      -webkit-transform: translateY(0); 
      transform: translateY(0); 
     } 

     to { 
      -moz-transform: translateY(-3px); 
      -ms-transform: translateY(-3px); 
      -o-transform: translateY(-3px); 
      -webkit-transform: translateY(-3px); 
      transform: translateY(-3px); 
     } 
    } 

    @keyframes tr-up { 
     from { 
      -moz-transform: translateY(0); 
      -ms-transform: translateY(0); 
      -o-transform: translateY(0); 
      -webkit-transform: translateY(0); 
      transform: translateY(0); 
     } 

     to { 
      -moz-transform: translateY(-3px); 
      -ms-transform: translateY(-3px); 
      -o-transform: translateY(-3px); 
      -webkit-transform: translateY(-3px); 
      transform: translateY(-3px); 
     } 
    }

До сих пор я попробовал в виде раствора следующие сообщения:

Stopping CSS3 KeyFrames Animation

Stop CSS3 animation jumping

Animation stop with css3

Stopping a CSS3 Animation on last frame

Но не из них работали для меня. Так что я делаю неправильно?

HERES THE FIDDLE

Примечание: tr-up класса динамически добавляются к персонажам ссылки.

источник

2014-12-16 Steven Web

Анимация shouldn't work on inline elements так что вам нужно изменить отображаемое по умолчания свойства <span> тегов к материалу span{display:inline-block;}:

Если вы хотите сохранить подчеркивание ваших пунктов меню, вы также должны добавить text-decoration:underline; тем пролетных тегов:

DEMO

источник

2014-12-16 11:19:38

было реально, что простой !! Спасибо за вашу помощь!!! –

скрипка была только для демонстрации, что текст-украшение будет отображаться в моем проекте, но еще раз спасибо! –

@StevenWeb Заметьте, что я также изменил 'animation-fill-mode: none; 'on' .tr-up' в 'animation-fill-mode: forwards;', но я думаю, что это была опечатка в вашей скрипке. –

Попробуйте добавить количество итераций

animation-iteration-count: 1;

Будет возможно

источник

2014-12-16 11:20:51 SekDinesh

попробовал ваше решение, но там, где никаких изменений! Спасибо за вашу помощь! –

Как остановить анимацию css3 в конце?

ответ

Смежные вопросы