I want to set the keyframe, animation parameters from inputtype.

I would like to create an animation that changes the width of the box from 0% 50px to the value entered.
I don't know how to set the input value with the keyframe parameter.

This is HTML.

<dl>
<dt>0%</dt>dd>50px</dd>
<dt>100%</dt><dd><input type="text" name="w100" id="w100" size="5">px</dd>
</dl>
<input type="button" value="Set" onclick="set();">
</form>
<div class="box"></div>

This is a jquery that I just wrote.Please let me know how to put the obtained value in 100% width of keyframe.

function set(){
get vara=$("#w100").val(); // value
varb = a + "px"; // give a unit        
$("div").addClass("c"); 
}

The CSS below is when the input value is 200.

<style>
.box {margin:10px;padding:0;height:50px;background:#fcc;
animation-name —anim;
animation-duration:3s;
animation-timin-function:ease-in;
animation-delay:1s;
animation-fill-mode:both;
- webkit-animation: a 3sease-in 1s both;
}
.c{
@keyframesanim{
         0% {height:50px;width:50px;} 
         100% {height:50px;width:200px;}
} 
}
</style>

javascript jquery css

2022-09-30 18:35

1 Answers

jQuery.KeyFrames Plug-in with $.keyframe.define() allows you to define keyframe parameters as follows:

下 Click the Run Snippet button below to see the results.

function set(){
  var width=$("#w100").val();
  variationName='anim_'+width;

  $.keyframe.define([{]
    name —animationName,
    '0%': {
      'height': '50px',
      'width': '50px'
    },
    '100%': {
      'height': '50px',
      'width': width + 'px'
    }
  }]);
  
  $(".box").playKeyframe({
    name —animationName,
    duration: '3s',
    timingFunction: 'ease-in',
    delay: '1s',
    fillMode: 'both'
});
}

.box{
  margin —10px;
  padding:0;
  height —50px;
  background: #fcc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<dl>
  <dt>0%</dt>
  <dd>50px</dd>
  <dt>100%</dt>
  <dd>
    <input type="text" name="w100" id="w100" size="5" value="400">px</dd>
</dl>
<input type="button" value="Set" onclick="set();">
</form>
<div class="box"></div>

2022-09-30 18:35

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656