Help me solve this task. Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the -webkit- prefix, followed by the standard declaration. Animation name property that specifies the name of the @keyframes rule animation. Animation duration property with a value of 5 seconds. MY CSS /* CSS reset */ body, header, main, section, footer, h1, h2 { margin: 0; padding: 0; border: 0; } /* Style rule for body */ body { background-color: #f0d8d1; } /* Style rules for header */ header { padding: 3%; text-align: center; font-size: 1.5em; font-weight: bold; } /* Style rules for main content area */ main { font-family: Verdana, Arial, sans-serif; font-size: 1em; margin: 0 2%; padding: 1em; background-color: #fff; border: 5px double #33091b; padding: 2%; } h2 { padding-bottom: 1%; } section { margin-bottom: 3%; } button { height: 3em; font-size: 1em; } .square { width: 200px; height: 200px; background-color: #33091b; margin-left: 6%; -webkit-animation-name: text-animation,color; animation-name: text-animation,color; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } @keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } /* Animation */ @-webkit-keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } @keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } /* Style rules for the footer */ footer { font-size: .90em; text-align: center; margin-top: 2em; }

Help me solve this task. Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the -webkit- prefix, followed by the standard declaration. Animation name property that specifies the name of the @keyframes rule animation. Animation duration property with a value of 5 seconds. MY CSS /* CSS reset / body, header, main, section, footer, h1, h2 { margin: 0; padding: 0; border: 0; } / Style rule for body / body { background-color: #f0d8d1; } / Style rules for header / header { padding: 3%; text-align: center; font-size: 1.5em; font-weight: bold; } / Style rules for main content area / main { font-family: Verdana, Arial, sans-serif; font-size: 1em; margin: 0 2%; padding: 1em; background-color: #fff; border: 5px double #33091b; padding: 2%; } h2 { padding-bottom: 1%; } section { margin-bottom: 3%; } button { height: 3em; font-size: 1em; } .square { width: 200px; height: 200px; background-color: #33091b; margin-left: 6%; -webkit-animation-name: text-animation,color; animation-name: text-animation,color; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } @keyframes text-animation { 0%{font-size: 1em;} 50%{font-size: 2em;} 100%{font-size: 1.35em;} } / Animation / @-webkit-keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } @keyframes color { from { background-color: #fbdae9; } to { background-color: #660b32; } } / Style rules for the footer */ footer { font-size: .90em; text-align: center; margin-top: 2em; }

EBK JAVA PROGRAMMING

9th Edition

ISBN:9781337671385

Author:FARRELL

Publisher:FARRELL

Chapter15: Using Javafx And Scene Builder

Section: Chapter Questions

Problem 1GZ

See similar textbooks

Related questions

Question

Help me solve this task.

Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the -webkit- prefix, followed by the standard declaration.

Animation name property that specifies the name of the @keyframes rule animation.
Animation duration property with a value of 5 seconds.

MY CSS

/* CSS reset */

body, header, main, section, footer, h1, h2 {

margin: 0;

padding: 0;

border: 0;

}

/* Style rule for body */

body {

background-color: #f0d8d1;

}

/* Style rules for header */

header {

padding: 3%;

text-align: center;

font-size: 1.5em;

font-weight: bold;

}

/* Style rules for main content area */

main {

font-family: Verdana, Arial, sans-serif;

font-size: 1em;

margin: 0 2%;

padding: 1em;

background-color: #fff;

border: 5px double #33091b;

padding: 2%;

}

h2 {

padding-bottom: 1%;

}

section {

margin-bottom: 3%;

}

button {

height: 3em;

font-size: 1em;

}

.square {

width: 200px;

height: 200px;

background-color: #33091b;

margin-left: 6%;

-webkit-animation-name: text-animation,color;

animation-name: text-animation,color;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

@-webkit-keyframes text-animation {

0%{font-size: 1em;}

50%{font-size: 2em;}

100%{font-size: 1.35em;}

}

@keyframes text-animation {

0%{font-size: 1em;}

50%{font-size: 2em;}

100%{font-size: 1.35em;}

}

/* Animation */

@-webkit-keyframes color {

from { background-color: #fbdae9; }

to { background-color: #660b32; }

}

@keyframes color {

from { background-color: #fbdae9; }

to { background-color: #660b32; }

}

/* Style rules for the footer */

footer {

font-size: .90em;

text-align: center;

margin-top: 2em;

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps with 2 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.