Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

CSS Level 14 Lesson 9

code
<!DOCTYPE html>
<html>
<head>
<title>CSS animation fill mode</title>
<style>
.box {
background-color:#FFB643;
width: 150px;
height: 150px;
color: #4535AA;
margin: 100px;
}

.change-forever {
animation-name: trendy;
animation-duration: 2s;
animation-fill-mode: both;
}

.reset {
animation-name: trendy;
animation-duration: 2s;
}

@keyframes trendy {
0% { background-color: #4535AA; color: #ED639E; }
25% { background-color: #ED639E; color: #4535AA; }
50% { background-color: #FFB643; color: #4535AA; }
100% { background-color: #4535AA; color: #ED639E; }
}
</style>
</head>
<body>
<div class="box change-forever">Hello</div>
<div class="box reset">Studytonight!</div>
</body>
</html>
code

I get the result described but I keep receiving error message: Please add all three selectors, separated by comma, before the opening curly brace. I cannot go to next lesson.
by

3 Answers

kshitijrana14
Try this one
<!DOCTYPE html>
<html>
<head>
<title>CSS animation fill mode</title>
<style>
.box {
background-color:#FFB643;
width: 150px;
height: 150px;
color: #4535AA;
margin: 100px;
}

.change-forever {
animation-name: trendy;
animation-duration: 2s;
animation-fill-mode: forwards;
}

.reset {
animation-name: trendy;
animation-duration: 2s;
}

@keyframes trendy {
0% { background-color: #4535AA; color: #ED639E; }
25% { background-color: #ED639E; color: #4535AA; }
50% { background-color: #FFB643; color: #4535AA; }
100% { background-color: #4535AA; color: #ED639E; }
}
</style>
</head>
<body>
<div class="box change-forever">Hello</div>
<div class="box reset">Studytonight!</div>
</body>
</html>
abdel-rahman
Thanks a lot @kshitijrana14, it worked. Very much appreciated, Sir.
Tanyakat2j
@abdel-rahman can u please share your code when u reach level 16 lesson 4

Login / Signup to Answer the Question.