I can't seem to get the simple animation I added to my code working properly.
<div class="phone-center">
<div class="phone">
</div>
</div>
.phone-center
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.phone
{
height: 100px;
width: 50px;
border: 3px solid black;
border-radius: 10px;
animation: rotatephone 1.5s ease-in-out infinite alternate;
}
@keyframes rotatephone
{
0%
{
transform: rotate(0deg)
}
50%
{
transform: rotate(90deg)
}
100%
{
transform: rotate(90deg)
}
}
Upon checking Elements\Computed, I noticed that the animation-name is empty
[]
However, under the Styles section, it seems like an animation is being detected, but with a different name
https://i.sstatic.net/pXopY.png
Any insights into what might be causing this issue? My site utilizes Vue 2 and Quasar v1, although I don't believe they are affecting this particular problem