<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>
<p>Цей приклад показує як працює властивість <code>animation</code>. Змінюйте значення для під-властивостей нижче, щоб змінити відображення анімації.</p>
<hr>
<strong>animation: </strong>
animation_name
<input type="number" class="input" min="0" id="dur" value="1">s
<select class="input" id="type">
<option value="linear" name="value2" selected>linear</option>
<option value="ease" name="value2">ease</option>
<option value="ease-in" name="value2">ease-in</option>
<option value="ease-out" name="value2">ease-out</option>
<option value="ease-in-out" name="value2">ease-in-out</option>
<option value="step-start" name="value2">step-start</option>
<option value="step-end" name="value2">step-end</option>
</select>
<select class="input" id="count">
<option value="infinite" name="value2" selected>infinite</option>
<option value="1s" name="value2">1s</option>
<option value="5s" name="value2">5s</option>
</select>
<strong>;</strong><br><br>
<hr>
<div class="box">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
</div>
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: 'Fira Sans', sans-serif;
}
.wm {
min-height: 100px;
}
.box span {
margin-top: 0;
display: block;
animation: animation_name 1s linear infinite;
font-weight: 700;
padding: 8px 0;
text-align: center;
}
@keyframes animation_name {
0% { margin-top: 0; }
50% { margin-top: 50px; }
100% { margin-top: 0; }
}
hr {
margin-bottom: 16px;
}
$('.input').on('change', function() {
var dur = $('#dur').val();
var type = $('#type').find(":selected").text();
var count = $('#count').find(":selected").text();
$('.box span').css( 'animation', 'animation_name ' + dur + 's ' + type + ' ' + count );
});
This Pen doesn't use any external CSS resources.