html
html
1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
<head>
<title>the famous star animation</title>
</head>
<body>
<img class="star" src="https://www.sololearn.com/Uploads/icons/sololearn.png">
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@keyframes slideSpin{
50%{
transform:translateX(150%) scale(0.5);
}
75%{
transform:translateX(150%) rotate(180deg) scale(0.5);
}
100%{
transform:translateX(300%) rotate(180deg);
}
}
.star{
animation:slideSpin 3s infinite;
animation-ful-mode:forwards;
animation-irretation-count:infinite;
animation-direction:alternate;
width:25%;
height:auto;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run