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; }
Chapter15: Using Javafx And Scene Builder
Section: Chapter Questions
Problem 1GZ
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
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 2 images
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.Recommended textbooks for you
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage