Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Jump to CSS keyframe animation

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • April 26, 2014 at 8:04 am #168728
    Arboc
    Participant

    Hello there,

    I am new to these forums, and I have got a question related to CSS keyframe animations.
    I am new to the topic of ‘animation’ and ‘CSS’. Furthermore, I have basic Javascript knowledge.

    Imagine I have the following code;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="javascript">

function startAnimation(){}
function jumpToKeyframe(){}

</script>
</head>

<body>
<input onclick="startAnimation();" name="Start" type="button" value="Start" /><br />
<input onclick="jumpToKeyframe(); " name="Jump" type="button" value="Jump" />  <br/><br/>

<div class="box"></div>

</body>
</html>

    With CSS:

    @charset "utf-8";

body {
    margin: 0;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    line-height: 1.5;
    text-align:left;
}

.box{
    height: 200px;
    width: 200px;
    background-color:red;
    position:relative;
-webkit-animation:animation 5s; /* Chrome, Safari, Opera */
animation:animation 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animation
{
0%   {left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {left:200px; top:200px;}
75%  {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

/* Standard syntax */
@keyframes animation
{
0%   {left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {left:200px; top:200px;}
75%  {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

    How can I control this animation by using the buttons?
    For instance, when I press the button ‘Start ‘, I want the animation to start at keyframe 0%.
    Furthermore, when I press the button ‘Jump’, I want the animation to start playing at keyframe 50%;

    How is this possible?

    Kind regards,

  • Author
    Posts
Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.