My HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Welcome to SPACE </title><link rel="icon" href="planeticon.png"><link rel="stylesheet" href="indexspace.css"></head><body><div class="container"><div class="sun"></div><div class="earth"></div></div></body></html>So this is my CSS:
body { margin: 0; padding: 0; background: url(starbackground.jpg);}.container {width: 120px;height: 120px;margin: 200px auto;position: relative;padding:40px;}.sun { width: 120px; height: 120px; background: URL(sun2.png) no-repeat; background-size: cover; border-radius: 50%;}.earth { width: 40px; height: 35px; background: url(earth4.png) no-repeat; background-size: cover; border-radius: 50%; position: absolute; top: 0; left: 0; box-shadow: 20px 20px 10px 2px #000000cc; animation-duration: 4s; animation-name: slide;}@keyframes slide { 50%{ left: calc(100%-40px); top: calc(100%-40px); } 100% { z-index: -1; }}And this is what it shows in Inspect: [key frame problem][1] [1]: https://i.stack.imgur.com/NmT6I.png
I've read that strikethrough lines means that some other element is overriding its importance, however I'm struggling to figure this one out.Thanks in advance