Hi,
It’s one of the last challenges in Applied Visual Design. When I read what I should do, different ids are used than the ones in the code. In the explanation ball1, ball2 and ball3 is mentioned but in the code I see star1, star2 and star3. I’m not passing the challenge though it isn’t difficult or complicated. Maybe the difference in ids is causing this?
Greets,
Karin Meersman
Hi,
Here’s the code. By the way, in the code, classes are used and in the explanation ids.
<style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
animation-timing-function: linear;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-duration: 0.9s;
animation-name: twinkle;
animation-timing-function: ease-out;
}
.star-3 {
margin-top: 10%;
margin-left: 50%;
animation-duration: 1.1s;
animation-name: twinkle;
}
@keyframes twinkle {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
The explanation is as follows:
For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.
Greets and thanks,
Karin Meersman