I attempted to create an animated effect that involves a Tilted & Jump movement across the screen, but unfortunately, the gradient feature is not functioning properly.
This is the code I used:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100px;
height:100px;
background: linear gradient(red,yellow);
color: #ffffff;
position: relative;
font-weight:bold;
font-size:20px;
padding:10px;
border-radius:5px;
animation:animated_div 5s 5;
-webkit-animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-o-animation:animated_div 5s 5;
-webkit-border-radius:5px;
}
@keyframes animated_div {
0% {transform: rotate(0deg);left:0px;}
12.5% {transform: rotate(20deg);left:0px;}
25% {transform: rotate(0deg);left:500px;}
27.5% {transform: rotate(0deg);left:500px;}
35% {transform: rotate(0deg);left:500px;background:-webkit- linear- gradient(red,yellow);}
50% {transform: rotate(-360deg);left:0px;}
62.5% {transform: rotate(0deg);left:0px;}
77.5% {transform: rotate(20deg);left:0px;}
80% {transform: rotate(0deg);left:500px;}
90% {transform: rotate(0deg);left:500px;}
95% {transform: rotate(0deg);left:500px;background:-webkit-linear- gradient(Yellow,Red);}
100% {transform: rotate(-360deg);left:0px;}
}
body{background-color:black;}
</style>
</head>
<body>
<img class="q" src="https://pbs.twimg.com/media/C3dJvIZUEAAkIjg.png">
</body>
</html>
However, the border gradients are not displaying as intended.