2.9 KiB
2.9 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78a8367417b2b2512ae7 | Change Animation Timing with Keywords | 0 | https://scrimba.com/c/cJKvwCM |
Description
animation-timing-function
property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration
), the animation-timing-function
says how the car accelerates and decelerates over the course of the drive.
There are a number of predefined keywords available for popular options. For example, the default value is ease
, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include ease-out
, which is quick in the beginning then slows down, ease-in
, which is slow in the beginning, then speeds up at the end, or linear
, which applies a constant animation speed throughout.
Instructions
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.
Tests
tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.
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: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.
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