Applied Visual Design - Create Visual Direction by Fading an Element from Left to Right

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I have tried the challenge in my browser about a ball that moves to right smoothly. In the challenge it was moving smoothly with the similar code, but when I tried it in different browser it transported the ball in a second and is not smooth like in the challenge??

  **Your code so far**

<style>

#disappearing-ball {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    bottom: 220px;
    background: linear-gradient(
        45deg, 
        cyan,
        rgb(255, 121, 144)
        );
    animation-name: fade;
    animation-duration: 3s;
}
@keyframes fade {
    50% {
        left: 80%;
        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/103.0.5060.134 Safari/537.36

Challenge: Applied Visual Design - Create Visual Direction by Fading an Element from Left to Right

Link to the challenge:

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.