250+ TOP MCQs on CSS3 Animation with Responsive Web Design

CSS Questions on “CSS3 Animation with Responsive Web Design”.

1. 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

Answer: d
Clarification: Self-explainatory.

2. 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
b) @media screen
c) div
d) transform

Answer: b
Clarification: None.

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

Code:
_________ leftmove {
100% { transform: translateX(-70px); opacity: 1; }
}
_________ rightmove {
100% { transform: translateX(70px); opacity: 1; }
}
<script>
$(function() {
var footerBottom = $("#articlefooter").offset().top + $("#articlefooter").height();
$(window).scroll(function() {
if ($(this).scrollTop() > (footerBottom - $(window).height())) {
131
$("#prevpage").css('animation', 'leftmove 1s 2s forwards');
$("#nextpage").css('animation', 'rightmove 1s 1s forwards');
});
});
</script>

a) @media
b) @keyframes
c) animation-name
d) !important

Answer: b
Clarification: None.

4. Which of the following CSS framework is used to create a responsive design?
a) larawell
b) bootstrap
c) rails
d) django

Answer: b
Clarification: 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.

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

a) =

“viewport” content=“width=device-width, initial-scale=1.0”> b) =

“viewport” content=“width=device-width, initial-scale=2.0”> c) =

“viewport” content=“width=device-width, initial-scale=’parent-size'”> d) =

“viewports” content=“width=device-width, initial-scale=1.0”>

View Answer

Answer: a
Clarification: Self-explainatory.

6. What does this code do?

Code:
 @media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

a) If the browser window is smaller than 500px, the background color will change to lightblue:
b) If the browser window is larger than 500px, the background color will change to lightblue:
c) The background color will change to lightblue
d) Nothing happens

Answer: a
Clarification: Self-explainatory.

7. 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

Answer: a
Clarification: Self-explainatory.

8. 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

Syntax: binding: none | url(bindingfile)

9. 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

Answer: b
Clarification: Self-explainatory.

10. Which of the following css propery define the properties that will be animated in an animation rule?
a) @keyframes
b) animation-origin
c) transform
d) animation

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