Tell us what’s happening:
can someone tell me why this is not working?
here is the assignment…
" The keyframes
rule for fade should set the opacity
property to 0.1 at 50%."
Your code so far
<style>
#ball {
width: 70px;
height: 70px;
margin: 50px auto;
position: fixed;
left: 20%;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: fade;
animation-duration: 3s;
}
@keyframes fade {
50% {
left: 60%;
}
}
@keyframes fade {
50% {
right: 50%;
opacity: 0.1;
}
}
</style>
<div id="ball"></div>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36
.
Challenge: Create Visual Direction by Fading an Element from Left to Right
Link to the challenge: