CSS Questions & Answers – CSS3 Animation with Responsive Web Design

CSS Multiple Choice Questions & Answers (MCQs) focuses on “CSS3 Animation with Responsive Web Design”.

Q 1. What should be written in the blank of the code for JQuery Code Used to Apply CSS3 Animations?
advertisement

Code:
leftmove {
100% { transform: translateX(-70px); opacity: 1; }
}
rightmove {
100% { transform: translateX(70px); opacity: 1; }
}

A. @media
B. @keyframes
C. animation-name
D. !important

Show Answer

Answer:-B. @keyframes

Explanation

Q 2. Which of the following css property should be used to make a responsive image?
A. float
B. max-width
C. margin-right
D. all of the mentioned

Show Answer

Answer:-D. all of the mentioned

Q 3. Which of the following CSS framework is used to create a responsive design?
A. larawell
B. rails
C. bootstrap
D. django

Show Answer

Answer:-C. bootstrap

Explanation

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Q . 4 Which of the following code set the webpage correctly displayed on a device?

A. <meta name="viewport" content="width=device-width, initial-scale=1.0">
B. <meta name="viewport" content="width=device-width, initial-scale=2.0">
C. <meta name="viewport" content="width=device-width, initial-scale='parent-size'">
D. <meta name="viewports" content="width=device-width, initial
scale=1.0">

Show Answer

Answer:-A.

Q 5. What does this code do?

Code:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
A. The background color will change to lightblue
B. If the browser window is larger than 500px, the background color will change to lightblue:
C. If the browser window is smaller than 500px, the background color will change to lightblue:
D. Nothing happens

Show Answer

Answer:-C. If the browser window is smaller than 500px, the background color will change to lightblue:

Q 6. What does this code do?

Code:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
A. web page will have a lighblue background if the orientation is in landscape mode
B. web page will have a lighblue background if the orientation is not in landscape mode
C. web page will have a red background if the orientation is in landscape mode
D.. None of the mentioned

Show Answer

Answer:-A. web page will have a lighblue background if the orientation is in landscape mode

Q 7. Which of the following css propery defines a relationship between bound elements(s) and some code or content?
A. @import
B. @media
C. url-bind
D. binding

Show Answer

Answer:-D. binding

Explanation

Syntax: binding: none | url(bindingfile)

Q 8. What does this code do?

Code:
@media only screen and (max-width: 768px) {
class*=”col-“] {
width: 100%;
}
}
A. When the screen gets larger than 768px, each column should have a width of 100%.
B. When the screen gets smaller than 768px, each column should have a width of 100%.
C. Error occured
D. None of the mentioned

Show Answer

Answer:-B. When the screen gets smaller than 768px, each column should have a width of 100%.

Q 9. Which of the following CSS Property define the properties that will be animated in an animation rule?
A. animation
B. animation-origin
C. transform
D. @keyframes

Show Answer

Answer:-A. animation

Explanation

Syntax: @keyframes: keyframe-name {percentage | from | to {cssrules}}

Q 10 . What should be written in the blank of the code for resizing elements in Responsive Web Design with Transitions

Code:
body { background-image: url(fog.jpg); background-size: cover;
background-repeat: no-repeat; color: #fff; font-family: Avenir, Arial, sans-serif;
}
h1 { font-family: ‘Calluna Sans’, Arial, sans-serif; text-align: center;
font-size: 10rem; margin: 8rem auto;
}
h1 { font-family: ‘Calluna Sans’, Arial, sans-serif;
text-align: center; font-size: 10rem; margin: 8rem auto; transition: 1s font-size linear;
}
__ and (max-width: 1100px) {
h1 { font-size: 8rem; }

A. @media screen
B. @media
C. div
D. transform

Show Answer

Answer:-A. @media screen