@media screen and (min-width: 1261px) { :root {--anim-nav: 45s;} } @media screen and (min-width: 992px) and (max-width: 1260px) { :root {--anim-nav: 40s;} } @media screen and (min-width: 768px) and (max-width: 991px) { :root {--anim-nav: 30s;} } @media screen and (max-width: 767px) { :root {--anim-nav: 15s;} } .navbar:after { content: ''; background-image: url("https://gyazo.com/8e76071e5281e7396c84c83d32554939/max_size/1000"); background-size: contain; background-repeat: no-repeat; display: block; position: absolute; width: 30px; height: 30px; animation: img_rotate ease-in-out 1s infinite alternate forwards, bound ease-in-out .5s infinite alternate forwards,img_motion linear var(--anim-nav) infinite alternate forwards ; } @keyframes img_motion { 0%{ margin-left: 0px; } 100%{ margin-left: calc(100vw - 30px); } } @keyframes img_rotate { 0% { transform: rotate(-20deg); } 100% { transform: rotate(20deg); } } @keyframes bound { 0%{ top: 0px; } 100%{ top: 10px; } }