Показать сообщение отдельно
  #4 (permalink)  
Старый 21.03.2014, 11:39
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

Сообщение от рони Посмотреть сообщение
FanAizu,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  @-o-keyframes girls-move1{
    100%{
      top:100px;
    }
  }

  @-webkit-keyframes girls-move1{
    100%{
      top:100px;
    }
  }

  @-moz-keyframes girls-move1{
    100%{
      top:100px;
    }
  }

  @keyframes girls-move1{
    100%{
      top:100px;
    }
  }

  @-o-keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @-webkit-keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @-moz-keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  #girls{
    position:relative;
    top:0;
    left:0;
    -webkit-animation:girls-move1 2s 0s forwards linear,girls-move2 2s 4s forwards linear;
    -o-animation:girls-move1 2s 0s forwards linear,girls-move2 2s 4s forwards linear;
    -moz-animation:girls-move1 2s 0s forwards linear,girls-move2 2s 4s forwards linear;
    animation:girls-move1 2s 0s forwards linear,girls-move2 2s 4s forwards linear;
  }
  </style>


</head>

<body>
  <img src="http://file.mobilmusic.ru/3f/e4/92/944517-160.jpg" alt="" id="girls">
</body>

</html>
да, про такой вариант я знаю, спасибо. но хотелось бы не задавать во второй анимацие в 0% кадре значение top, мне нужно, чтобы значение top после первой анимации сохранялось у элемента. Можно ли этого как-то добиться?
Ответить с цитированием