Chapter 7 : CSS Animations

Question 1

What do we need to specify to use CSS3 animation?

Answer 1

1. Specify some keyframes for the animation

Question 2

What will happen when we specify CSS styles inside the @keyframes rule?

Answer 2

1. The animation will gradually change from the current style to the new style at certain times

• To get an animation to work, we must bind the animation to an element

Question 3

Create a changeColor keyframes and assign it to a <div> element

Answer 3

div
{
width: 500px;
height: 500px;
border-radius: 50%;
background-color: red;
animation-name: changeColor;
animation-duration: 4s;
}

@keyframes changeColor
{
from {background-color: red;}
to {background-color: purple; }
}

• CSS will automatically assign color when background color is changed ( Red -> Purple -> Blue )

Question 4

Create a changeColor keyframes and assign it to a <div> element, but it requires
1. Red , then
2. Yellow, then
3. Blue, then
4. Green

Answer 4

div
{
width: 500px;
height: 500px;
border-radius: 50%;
background-color: red;
animation-name: changeColor;
animation-duration: 4s infinite;
}

@keyframes changeColor
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

Question 5

Create a changeColor keyframes and assign it to a <div> element, but it requires
1. Red , then
2. Yellow, then
3. Blue, then
4. Green

Also change the div element position

Answer 5

div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
position: relative;
animation-name: changeColor;
animation-duration: 4s;
}

@keyframes changeColor {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

Question 6

What does animation-dealy does?

Answer 6

1. Specifies a dealy for the start of an animation

Question 7

Create a div element to specify delay for 2 seonds before animation starts playing

Answer 7

div
{
width: 100px;
height: 100px;
position: relative;
background-color:red;
animation-name: changeColor;
animation-duration: 4s;
animation-delay: 2s;
}

Question 8

What property should we use to specify the number of times an animation should run?

Answer 8

1. animation-iteration-count

Question 9

What are the 2 values for animation-iteration-count property?

Answer 9

1. Number ( 1, 2 )
   
   • Loops though the numbers define
2. infinite

• animation-iteration-count: 3 ; / animation-iteration-count: infinite ;

Question 10

What is the usage of animation-direction property?

Answer 10

1. Used to let an animation run in reverse direction or alternat cycles

Question 11

What are the 2 values for animation-direction property?

Answer 11

1. reverse
2. alternate

• animation-direction: reverse
  animation-direction: alternate

Question 12

What does the animation-timing-function property specifies?

Answer 12

1. The speed curve of the animation

Question 13

List out all the 6 values for animation-timing-function property

Answer 13

1. ease
2. linear
3. ease-in
4. ease-out
5. ease-in-out
6. cubic-bezier(n,n,n,n)

Question 14

What is the shorthand property for
div {
animation-name: changeColor;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Answer 14

div
{
animation: changeColor 5s linear 2s infinite alternate
}