I want to make a small animation on one of the icons, but I don't know how to do it... This is the code I have
#pruebamov2 {
position: relative;
transform: rotateY(10deg);
animation: pruebamov2 0.5s 2;
perspective: 100px;
}
@keyframes pruebamov2 {
50% {perspective: 100px;}
}
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>
<i class="material-icons" style="font-size:24px; color: DarkSlateBlue" id="pruebamov2">business_center</i>
Hola
</p>
</body>
</html>
It's supposed to rotate 10º, and back to 0, and repeat it one more time. All that in 0.5 seconds, but it does nothing.
I have no idea what I'm missing, or what I've done wrong. I have another animation that works perfectly.
What could it be? Thank you very much.