diff --git a/seed/challenges/01-responsive-web-design/applied-visual-design.json b/seed/challenges/01-responsive-web-design/applied-visual-design.json
index 2f4fa9c7f07..ffe5f1e6c2a 100644
--- a/seed/challenges/01-responsive-web-design/applied-visual-design.json
+++ b/seed/challenges/01-responsive-web-design/applied-visual-design.json
@@ -2188,8 +2188,9 @@
"description": [
"You can use CSS @keyframes
to change the color of a button in its hover state.",
"Here's an example of changing the height of an image on hover:",
- "
<style>", + "
img:hover {
animation-name: width;
animation-duration: 4s;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
<style>", "
img:hover {
animation-name: width;
animation-duration: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
ms
stands for milliseconds, which are 1/1000 of a second.",
"Use CSS @keyframes
to change the background-color
of the button
element so it becomes #4791d0
when a user hovers over it. The @keyframes
rule should only have an entry for 100%
."
],
"challengeSeed": [
@@ -2202,7 +2203,7 @@
" }",
" button:hover {",
" animation-name: background-color;",
- " animation-duration: 4s;",
+ " animation-duration: 500ms;",
" }",
" ",
" ",
@@ -2220,6 +2221,46 @@
"challengeType": 0,
"translations": {}
},
+ {
+ "id": "58a7a6ebf9a6318348e2d5aa",
+ "title": "Modify Fill Mode of an Animation",
+ "description": [
+ "That's great, but it doesn't work right yet. Notice how the animation resets after 500ms
has passed, causing the button to revert back to the original color. You want the button to stay highlighted.",
+ "This can be done by setting the animation-fill-mode
property to forwards
. The animation-fill-mode
specifies the style applied to an element when the animation has finished. You can set it like so:",
+ "animation-fill-mode: forwards;
",
+ "animation-fill-mode
property of button:hover
to forwards
so the button stays highlighted when a user hovers over it."
+ ],
+ "challengeSeed": [
+ "",
+ ""
+ ],
+ "tests": [
+ "assert(code.match(/button:hover\\s*?{\\s*?animation-name:\\s*?background-color;\\s*?animation-duration:\\s*?500ms;\\s*?animation-fill-mode:\\s*?forwards;\\s*?}/gi), 'message: button:hover
should have a animation-fill-mode
property with a value of forwards
.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {}
+ },
{
"id": "587d78a7367417b2b2512ae1",
"title": "Create Movement Using CSS Animation",