Minor text fixes in Applied Visual Design challenges
This commit is contained in:
Atomk
@ -1864,10 +1864,10 @@
|
||||
" margin: 50 auto;",
|
||||
" position: fixed;",
|
||||
" background: linear-gradient(",
|
||||
" 35deg,",
|
||||
" #ccffff,",
|
||||
" #ffcccc",
|
||||
" ); ",
|
||||
" 35deg,",
|
||||
" #ccffff,",
|
||||
" #ffcccc",
|
||||
" );",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
" #ball1 {",
|
||||
@ -1876,7 +1876,6 @@
|
||||
" #ball2 {",
|
||||
" left:65%;",
|
||||
" ",
|
||||
" ",
|
||||
" }",
|
||||
"",
|
||||
"",
|
||||
@ -1959,7 +1958,6 @@
|
||||
" #bottom {",
|
||||
" background-color: blue;",
|
||||
" ",
|
||||
" ",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
@ -1991,12 +1989,11 @@
|
||||
" div { ",
|
||||
" width: 70%;",
|
||||
" height: 100px;",
|
||||
" margin: 50px auto;",
|
||||
" margin: 50px auto;",
|
||||
" }",
|
||||
" #top {",
|
||||
" background-color: red;",
|
||||
" ",
|
||||
" ",
|
||||
" }",
|
||||
" #bottom {",
|
||||
" background-color: blue;",
|
||||
@ -2131,7 +2128,7 @@
|
||||
"To animate an element, you need to know about the animation properties and the <code>@keyframes</code> rule. The animation properties control how the animation should behave and the <code>@keyframes</code> rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:",
|
||||
"<code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.",
|
||||
"<code>animation-duration</code> sets the length of time for the animation.",
|
||||
"<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animate properties:",
|
||||
"<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animation properties:",
|
||||
"<blockquote>#anim {<br> animation-name: colorful;<br> animation-duration: 3s;<br>}<br>@keyframes colorful {<br> 0% {<br> background-color: blue;<br> }<br> 100% {<br> background-color: yellow;<br> }<br>}</blockquote>",
|
||||
"For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.",
|
||||
"<hr>",
|
||||
@ -2139,11 +2136,11 @@
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" div{",
|
||||
" height:40px;",
|
||||
" div {",
|
||||
" height: 40px;",
|
||||
" width: 70%;",
|
||||
" background:black;",
|
||||
" margin: 50 auto;",
|
||||
" background: black;",
|
||||
" margin: 50px auto;",
|
||||
" border-radius: 5px;",
|
||||
" }",
|
||||
"",
|
||||
@ -2266,11 +2263,11 @@
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" div{",
|
||||
" height:40px;",
|
||||
" div {",
|
||||
" height: 40px;",
|
||||
" width: 70%;",
|
||||
" background:black;",
|
||||
" margin: 50 auto;",
|
||||
" background: black;",
|
||||
" margin: 50px auto;",
|
||||
" border-radius: 5px;",
|
||||
" position: relative;",
|
||||
" }",
|
||||
@ -2320,7 +2317,7 @@
|
||||
"For this challenge, you'll change the <code>opacity</code> of an animated element so it gradually fades as it reaches the right side of the screen.",
|
||||
"In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the <code>@keyframes</code> rule.",
|
||||
"<hr>",
|
||||
"Target the element with the id of <code>ball</code> and add the <code>opacity</code> property set to 0.1 at <code>50%</code> so the element fades as it moves to the right."
|
||||
"Target the element with the id of <code>ball</code> and add the <code>opacity</code> property set to 0.1 at <code>50%</code>, so the element fades as it moves to the right."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -2328,22 +2325,22 @@
|
||||
" #ball {",
|
||||
" width: 70px;",
|
||||
" height: 70px;",
|
||||
" margin: 50 auto;",
|
||||
" margin: 50px auto;",
|
||||
" position: fixed;",
|
||||
" left:20%;",
|
||||
" left: 20%;",
|
||||
" border-radius: 50%;",
|
||||
" background: linear-gradient(",
|
||||
" 35deg,",
|
||||
" #ccffff,",
|
||||
" #ffcccc",
|
||||
" );",
|
||||
" animation-name: fade;",
|
||||
" animation-duration: 3s;",
|
||||
" animation-name: fade;",
|
||||
" animation-duration: 3s;",
|
||||
" }",
|
||||
"",
|
||||
" @keyframes fade {",
|
||||
" 50% {",
|
||||
" left:60%;",
|
||||
" left: 60%;",
|
||||
" ",
|
||||
" }",
|
||||
" }",
|
||||
@ -2368,7 +2365,7 @@
|
||||
"description": [
|
||||
"The previous challenges covered how to use some of the animation properties and the <code>@keyframes</code> rule. Another animation property is the <code>animation-iteration-count</code>, which allows you to control how many times you would like to loop through the animation. Here's an example:",
|
||||
"<code>animation-iteration-count: 3;</code>",
|
||||
"The above animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.",
|
||||
"In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.",
|
||||
"<hr>",
|
||||
"To keep the ball bouncing on the right on a continuous loop, change the <code>animation-iteration-count</code> property to infinite."
|
||||
],
|
||||
@ -2378,7 +2375,7 @@
|
||||
" #ball {",
|
||||
" width: 100px;",
|
||||
" height: 100px;",
|
||||
" margin: 50 auto;",
|
||||
" margin: 50px auto;",
|
||||
" position: relative;",
|
||||
" border-radius: 50%;",
|
||||
" background: linear-gradient(",
|
||||
@ -2393,15 +2390,15 @@
|
||||
"",
|
||||
" @keyframes bounce{",
|
||||
" 0% {",
|
||||
" top:0px;",
|
||||
" top: 0px;",
|
||||
" }",
|
||||
" 50% {",
|
||||
" top:249px;",
|
||||
" top: 249px;",
|
||||
" width: 130px;",
|
||||
" height: 70px;",
|
||||
" }",
|
||||
" 100% {",
|
||||
" top:0px;",
|
||||
" top: 0px;",
|
||||
" }",
|
||||
" }",
|
||||
"</style>",
|
||||
@ -2429,14 +2426,14 @@
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .back {",
|
||||
" position:fixed;",
|
||||
" padding:0;",
|
||||
" margin:0;",
|
||||
" top:0;",
|
||||
" left:0;",
|
||||
" position: fixed;",
|
||||
" padding: 0;",
|
||||
" margin: 0;",
|
||||
" top: 0;",
|
||||
" left: 0;",
|
||||
" width: 100%;",
|
||||
" height: 100%;",
|
||||
" background:white;",
|
||||
" background: white;",
|
||||
" animation-name: backdiv;",
|
||||
" animation-duration: 1s; ",
|
||||
" ",
|
||||
@ -2480,7 +2477,7 @@
|
||||
"",
|
||||
" @keyframes backdiv {",
|
||||
" 50% {",
|
||||
" background:#ffe6f2;",
|
||||
" background: #ffe6f2;",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
@ -2489,7 +2486,7 @@
|
||||
" transform: scale(1) rotate(-45deg);",
|
||||
" }",
|
||||
" 50% {",
|
||||
" transform: scale(.6) rotate(-45deg);",
|
||||
" transform: scale(0.6) rotate(-45deg);",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
@ -2530,27 +2527,27 @@
|
||||
" .star-1 {",
|
||||
" margin-top: 15%; ",
|
||||
" margin-left: 60%;",
|
||||
" animation-duration: 1s;",
|
||||
" animation-name: twinkle-1;",
|
||||
" animation-duration: 1s;",
|
||||
" }",
|
||||
"",
|
||||
" .star-2 {",
|
||||
" margin-top: 25%;",
|
||||
" margin-left: 25%;",
|
||||
" animation-duration: 1s;",
|
||||
" animation-name: twinkle-2;",
|
||||
" animation-duration: 1s;",
|
||||
" }",
|
||||
"",
|
||||
" @keyframes twinkle-1 {",
|
||||
" 20% {",
|
||||
" transform: scale(.5);",
|
||||
" transform: scale(0.5);",
|
||||
" opacity: 0.5;",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
" @keyframes twinkle-2 {",
|
||||
" 20% {",
|
||||
" transform: scale(.5);",
|
||||
" transform: scale(0.5);",
|
||||
" opacity: 0.5;",
|
||||
" }",
|
||||
" }",
|
||||
@ -2563,7 +2560,7 @@
|
||||
" left: 0;",
|
||||
" width: 100%;",
|
||||
" height: 100%;",
|
||||
" background: linear-gradient(black,#000099,#66c2ff, #ffcccc, #ffeee6);",
|
||||
" background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
@ -2625,7 +2622,7 @@
|
||||
"",
|
||||
" @keyframes twinkle {",
|
||||
" 20% {",
|
||||
" transform: scale(.5);",
|
||||
" transform: scale(0.5);",
|
||||
" opacity: 0.5;",
|
||||
" }",
|
||||
" }",
|
||||
@ -2638,7 +2635,7 @@
|
||||
" left: 0;",
|
||||
" width: 100%;",
|
||||
" height: 100%;",
|
||||
" background: linear-gradient(black,#000099,#66c2ff, #ffcccc, #ffeee6);",
|
||||
" background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
@ -2671,13 +2668,13 @@
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
"",
|
||||
" .balls{",
|
||||
" .balls {",
|
||||
" border-radius: 50%;",
|
||||
" background: linear-gradient(",
|
||||
" 35deg,",
|
||||
" #ccffff,",
|
||||
" #ffcccc",
|
||||
" );",
|
||||
" 35deg,",
|
||||
" #ccffff,",
|
||||
" #ffcccc",
|
||||
" );",
|
||||
" position: fixed; ",
|
||||
" width: 50px;",
|
||||
" height: 50px;",
|
||||
@ -2695,12 +2692,12 @@
|
||||
" ",
|
||||
" }",
|
||||
"",
|
||||
"@keyframes bounce{",
|
||||
"@keyframes bounce {",
|
||||
" 0% {",
|
||||
" top:0px;",
|
||||
" top: 0px;",
|
||||
" } ",
|
||||
" 100% {",
|
||||
" top:249px;",
|
||||
" top: 249px;",
|
||||
" }",
|
||||
"} ",
|
||||
"",
|
||||
@ -2738,10 +2735,10 @@
|
||||
" .balls{",
|
||||
" border-radius: 50%;",
|
||||
" background: linear-gradient(",
|
||||
" 35deg,",
|
||||
" #ccffff,",
|
||||
" #ffcccc",
|
||||
" );",
|
||||
" 35deg,",
|
||||
" #ccffff,",
|
||||
" #ffcccc",
|
||||
" );",
|
||||
" position: fixed; ",
|
||||
" width: 50px;",
|
||||
" height: 50px;",
|
||||
@ -2751,20 +2748,20 @@
|
||||
" animation-iteration-count: infinite;",
|
||||
" }",
|
||||
" #ball1 { ",
|
||||
" left:27%;",
|
||||
" left: 27%;",
|
||||
" animation-timing-function: linear;",
|
||||
" }",
|
||||
" #ball2 { ",
|
||||
" left:56%;",
|
||||
" left: 56%;",
|
||||
" animation-timing-function: ease-out;",
|
||||
" }",
|
||||
"",
|
||||
"@keyframes bounce{",
|
||||
"@keyframes bounce {",
|
||||
" 0% {",
|
||||
" top:0px;",
|
||||
" top: 0px;",
|
||||
" } ",
|
||||
" 100% {",
|
||||
" top:249px;",
|
||||
" top: 249px;",
|
||||
" }",
|
||||
"} ",
|
||||
"",
|
||||
@ -2799,7 +2796,7 @@
|
||||
"<style>",
|
||||
" .balls{",
|
||||
" border-radius: 50%;",
|
||||
" position: fixed; ",
|
||||
" position: fixed;",
|
||||
" width: 50px;",
|
||||
" height: 50px;",
|
||||
" margin-top: 50px;",
|
||||
@ -2808,21 +2805,21 @@
|
||||
" animation-iteration-count: infinite;",
|
||||
" }",
|
||||
" #red {",
|
||||
" background:red;",
|
||||
" left:27%;",
|
||||
" background: red;",
|
||||
" left: 27%;",
|
||||
" animation-timing-function: linear;",
|
||||
" }",
|
||||
" #blue {",
|
||||
" background:blue;",
|
||||
" left:56%;",
|
||||
" background: blue;",
|
||||
" left: 56%;",
|
||||
" animation-timing-function: ease-out;",
|
||||
" }",
|
||||
" @keyframes bounce{",
|
||||
" @keyframes bounce {",
|
||||
" 0% {",
|
||||
" top:0px;",
|
||||
" top: 0px;",
|
||||
" }",
|
||||
" 100% {",
|
||||
" top:249px;",
|
||||
" top: 249px;",
|
||||
" }",
|
||||
" }",
|
||||
"</style>",
|
||||
@ -2857,7 +2854,7 @@
|
||||
"<style>",
|
||||
" .balls {",
|
||||
" border-radius: 50%;",
|
||||
" top:249px;",
|
||||
" top: 249px;",
|
||||
" position: fixed; ",
|
||||
" width: 50px;",
|
||||
" height: 50px;",
|
||||
@ -2867,24 +2864,24 @@
|
||||
" animation-iteration-count: infinite;",
|
||||
" }",
|
||||
" #red {",
|
||||
" background:red;",
|
||||
" left:25%;",
|
||||
" background: red;",
|
||||
" left: 25%;",
|
||||
" animation-timing-function: linear;",
|
||||
" }",
|
||||
" #blue {",
|
||||
" background:blue;",
|
||||
" left:50%;",
|
||||
" background: blue;",
|
||||
" left: 50%;",
|
||||
" animation-timing-function: ease-out;",
|
||||
" }",
|
||||
" #green {",
|
||||
" background:green;",
|
||||
" left:75%;",
|
||||
" animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1); ",
|
||||
" background: green;",
|
||||
" left: 75%;",
|
||||
" animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);",
|
||||
" }",
|
||||
"",
|
||||
" @keyframes jump {",
|
||||
" 50% {",
|
||||
" top:10%;",
|
||||
" top: 10%;",
|
||||
" }",
|
||||
" }",
|
||||
"</style>",
|
||||
|
||||
Reference in New Issue
Block a user