2.8 KiB
2.8 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a8367417b2b2512ae7 | Change Animation Timing with Keywords | 0 | Изменение времени анимации с помощью ключевых слов |
Description
animation-timing-function
определяет, как быстро изменяется анимированный элемент во время анимации. Если анимация - это автомобиль, перемещающийся из точки A в точку B в заданное время (продолжительность animation-duration
), animation-timing-function
говорит о том, как автомобиль ускоряется и замедляется в ходе движения. Для популярных опций есть несколько предопределенных ключевых слов. Например, значение по умолчанию - это ease
, которая начинается медленно, ускоряется в середине, а затем в конце замедляется. Другие варианты включают ease-out
, которое быстро начинается, а затем замедляется, ease-in
, что медленно начинается, а затем ускоряется в конце или linear
, что накладывает постоянную скорость анимации. Instructions
undefined
Tests
tests:
- text: ''
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
- text: ''
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'
Challenge Seed
<style>
.balls {
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left:27%;
}
#ball2 {
left:56%;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
Solution
// solution required