CSS Animations

CSS Animations

Easy Questions

CSS

CSS Attribute Selectors
Css miscellaneous
CSS Media Queries
CSS User Interface
CSS Styling Images
CSS Animations
CSS Transitions
CSS 3D Transforms
CSS 2D Transforms
CSS Gradients
CSS Introduction
CSS Tables
CSS Lists
CSS Fonts
CSS Text
CSS Outline
CSS Box Model
CSS Borders
CSS Backgrounds
CSS Colors
  1. Which of the following css propery define the properties that will be animated in an animation rule?










  1. View Hint View Answer Discuss in Forum

    NA

    Correct Option: B

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

  1. Which of the following css property should be used to make a responsive image?










  1. View Hint View Answer Discuss in Forum

    NA

    Correct Option: D

    All of above

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










  1. View Hint View Answer Discuss in Forum

    NA

    Correct Option: D

    @media screen

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










  1. View Hint View Answer Discuss in Forum

    NA

    Correct Option: A

    @keyframes

  1. Which of the following CSS framework is used to create a responsive design?










  1. View Hint View Answer Discuss in Forum

    NA

    Correct Option: D

    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.