6.4 KiB
6.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a7367417b2b2512adf | Learn How the CSS @keyframes and animation Properties Work | 0 | Узнайте, как работают CSS-файлы и анимация CSS |
Description
@keyframes
. Свойства анимации определяют, как должна себя вести анимация, и правило @keyframes
контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: animation-name
задает имя анимации, которое позже используется @keyframes
чтобы сообщить CSS, какие правила идут с анимацией. animation-duration
задает animation-duration
анимации. @keyframes
- это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование @keyframes
и свойств анимации: #anim {Для элемента с
анимация-имя: красочный;
продолжительность анимации: 3 с;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: желтый;
}
}
anim
идентификатором, фрагмент кода выше , задает animation-name
, чтобы colorful
и устанавливает animation-duration
до 3 секунд. Затем правило @keyframes
ссылается на свойства анимации с именем colorful
. Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%. Instructions
rect
, установив animation-name
на радугу и animation-duration
до 4 секунд. Затем объявите правило @keyframes
и установите background-color
в начале анимации ( 0%
) на синий, середина анимации ( 50%
) на зеленый, а конец анимации ( 100%
) на желтый. Tests
tests:
- text: Элемент с идентификатором <code>rect</code> должен иметь свойство <code>animation-name</code> со значением радуги.
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
- text: Элемент с идентификатором <code>rect</code> должен иметь свойство <code>animation-duration</code> со значением 4s.
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
- text: Правило <code>@keyframes</code> должно использовать <code>animation-name</code> радуги.
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
- text: Правило <code>@keyframes</code> для радуги должно использовать <code>background-color</code> синего цвета при 0%.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
- text: Правило <code>@keyframes</code> для радуги должно использовать зеленый <code>background-color</code> на 50%.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
- text: Правило <code>@keyframes</code> для радуги должно использовать <code>background-color</code> желтого цвета на 100%.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
Challenge Seed
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
}
</style>
<div id="rect"></div>
Solution
// solution required