Javascript-форум - Показать сообщение отдельно - Начало анимации с места предыдущей анимации

FanAizu · #4 (**permalink**) 21.03.2014, 12:39

Сообщение от рони

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 после первой анимации сохранялось у элемента. Можно ли этого как-то добиться?