Why the animation is not working ??

Question

Why the animation is not working in this code ??
https://code.sololearn.com/Wl3o780obwgf/?ref=app

Answer 1

Arushi

Your problem appears to be pink highlighted dashes, The screenshot below was taken from my pc. I removed the dashes and your code ran fine.

https://imgur.com/a/xNAnYvD
https://code.sololearn.com/W1gLekNu11Y6/#html

Answer 2

Gordon No need of sry. I think that was some SL bug or something like that. Maybe because I copied some parts of code from notepad and I think I copied some dashes which were invisible.

Answer 3

Gordon WebKit prefix work in SL. Many of my codes have WebKit prefix. Btw I tried without any prefix first but it was not working. Hence, I went for webkit

Answer 4

Don't know from where those pink dashes appeared ?? I have no idea.

Answer 5

My mobile or laptop. But I prefer mobile

Answer 6

Next time if you see this problem again , then go on sl website , login your sl account and edit the code from there

Answer 7

Gordon What is the problem with my animation ?? Why it isn't working ??

Answer 8

Arushi Singhania
Looks like your code is fixed, but my reply is about those dashes...
As you said you said you copied some part from notepad.
So notepad and Sololearn have different line endings.
Notepad uses windows line ending and Sololearn use Linux type line ending.
And that's why it fills your text some extra lines and squares when you copy and paste.

Answer 9

Arushi

If you don't mind me asking what type of device are you using, when on Sololearn?

Answer 10

https://code.sololearn.com/Wp1YnGb2d8Sy/?ref=app

Answer 11

There are two issues in your attempt, sis.

1. -webkit--prefix is for compatibility with Safari.
Your attempt is missing the usual @keyframes and animation, without the -webkit- prefix.

Note 1. There are also other prefixes, 5 totally. You will want to include all if you are serious with compatibility.

Note 2. Andrew G has provided a prefixfree library to help us to save lines for duplicating codes due to prefixes.

2. The contrast is not sharp.
It is not obvious unless the screen is switched to most bright, but still not obvious.

Answer 12

In this case, I am sorry that my explanation did not justify, Arushi.

Calvin will help you when he comes across this Q&A. He is more knowledgeable.

Answer 13

Arushi Singhania Your css code is working from what we view the code. But it contains non-text codes.

I used https://htmlformatter.com to filter the non-text. It's working now.. 😁
https://code.sololearn.com/WzlZGRiZmksH/?ref=app