HTML && CSS: 1. Provide code to change the background color of a hypertext link
ID: 3604820 • Letter: H
Question
HTML && CSS:
1. Provide code to change the background color of a hypertext link from yellow
to blue over a 3-second interval in response to the hover event.
2. Provide a style that changes the font size over a 2-second interval and the font
color over a 3-second interval.
3. Which timing function should you use to start the transition at a constant rate
and then slow down toward the end state?
4. Provide the style that creates a transition on all properties over a 5-second
interval using linear timing and a half-second delay.
5. Name three ways in which animations differ from transitions.
6. Provide an animation named biggerText that sets the font size to 1em, 1.2em,
1.5em, and 2em at key frames located at 0%, 10%, 20%, and 100% of the
animation duration.
7. Provide code to run the biggerText animation in the header element over an
interval of 4.5 seconds.
8. Provide the style to run an animation in reverse.
9. Provide code to apply the flip animation to the img element in the page
header. Have the animation run repeatedly over a 4-second interval in
alternating directions using ease-out timing.
Explanation / Answer
1ans:
<!DOCTYPE html>
<html>
<head>
<style>
a {
background-color:yellow ;
}
a:hover {
background-color: blue;
transition-delay:3s;
}
</style>
</head>
<body>
<a href="https://www.google.co.in/">wikipedia.org</a>
<p><b>Note:</b> This is answer one.</p>
</body>
</html>
2ans:
<!DOCTYPE html>
<html>
<head>
<style>
.a
{
font-size:10px;
color:blue;
}
.b
{
font-size:16px;
color:red;
}
.a:hover
{
font-size:14px;
transition-delay:2s;
}
.b:hover
{
color:violet;
transition-delay:3s;
}
</style>
</head>
<body>
<div>
<p class="a">This is sample htmlcode</p>
<p class="b">Trying to change the font size and color over time
interval</p>
</div>
</body>
</html>
3ans:
cubic-bezier is the timing function that uses the same duration value for both the transition to the end state and transtion from the end state. We can use different values depending the transition direction. Transition property on both the beginning state declaration and end state declaration can be specified.
examples:
(i) cubic-bezier(0.0, 0.0, 1.0, 1.0) - The animation moves from beginning to end at a constant rate
(ii) cubic-bezier(0.25, 0.1, 0.25, 1.0) - The animation starts slowly, accelerates sharply, and then slows gradually towards the end
(iii) cubic-bezier(0.42, 0.0, 1.0, 1.0) - The animation starts slowly, and then progressively speeds up until the end, at which point it stops abruptly
(iv) cubic-bezier(0.42, 0.0, 0.58, 1.0) - The animation starts slowly, speeds up, and then slows down towards the end
(v) cubic-bezier(0.0, 0.0, 0.58, 1.0) - The animation starts abruptly, and then progressively slows down towards the end
(vi) steps(1, end) - The animation stays in its initial state until the end, at which point it jumps directly to its final state.
(vii) steps(1, start) - The animation jumps immediately to its final state, where it stays until the end.
4ans:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: linear;
transition-property: opacity;
transition-duration: .5s;
transition-delay: .0.5s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>Move the mouse the div element above, to see the transition effect.</p>
</body>
</html>
5ans:
When animating on the web, there are times when we want to choose between animation and transition. A transition occurs when an element changes from one state to another, and the browser fills in that state change with a sequence of in-between frames. It has a beginning and an end state. We most often see transitions used on hover states, or when information on a page is added or removed. The hover states might be a subtle change in font color size and focus on information on the page etc,.Since transitions are limited to these two stages, we use them if you want to change an element from one state to another smoothly. Simple changes can usually be handled with transitions and timing functions can be used to customize the way the transition occurs.
CSS Animations are a more powerful than transitions. Rather than rely on a change from one beginning state to an end state, animations can be made up of as many in-between states as we like, and offer more control over how the states are animated. Where a transition only goes from start to end, an animation can go from in between states from start to end or any number of stages on need. Animations achieve this by using sets of keyframes. Where a transition can be specified with one line in the class, an animation works by referencing a set of keyframes that are described separately in the CSS.
We use animations, if we need to run when the page loads, or is more complex than a simple start to end state change, a CSS animation might be more appropriate. An animation might also be a good choice if an item has to move across multiple places on the page, such as an instruction overlay with a mouse cursor point out of various areas of interest on a screen.
Transitions for creating a smooth transition from one state to another, and animations for more complex series of movements.
Transitions are generally easier to create and manage, and apply to the majority of situations. If you need more control over animating an element through a series of steps, or if the animation needs to begin on load, then an animation with keyframes might be the better choice.
6ans:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: red;
position :relative;
animation: biggerText 5s ;
}
@keyframes biggerText {
0% {font-size: 1em;}
10% {font-size: 1.2em;}
20% {font-size: 1.5em;}
100% {font-size: 2em;}
}
</style>
</head>
<body>
<div><p>The @keyframes example</p> </div>
</body>
</html>
7ans:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: red;
position :relative;
animation: biggerText 4.5s ;
}
@keyframes biggerText {
0% {font-size: 1em;}
10% {font-size: 1.2em;}
20% {font-size: 1.5em;}
100% {font-size: 2em;}
}
</style>
</head>
<body>
<div><p>The @keyframes example</p> </div>
</body>
</html>
8ans:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: red;
position :relative;
animation: biggerText 5s infinite;
animation-direction: alternate;
}
@keyframes biggerText {
0% {font-size: 1em;}
10% {font-size: 1.2em;}
20% {font-size: 1.5em;}
100% {font-size: 2em;}
}
</style>
</head>
<body>
<p>Do the animation once, then do the animation in reverse direction</p>
<div><p>The @keyframes example</p> </div>
</body>
</html>
9ans:
<head>
<style>
div
{
transition-timing-function: ease-out;
position :relative;
animation: moveimage 4s infinite;
animation-direction: alternate;
}
@keyframes moveimage
{
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px;}
100% {top: 100px;}
}
</style>
</head>
<body>
<p>This is an example </p>
<div><img src="rose.jpeg" alt="rose flower" width="42" height="42">
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.