Why is my CSS not recognizing the animation I specified for it to play?

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

Answer №1

After extensive experimentation, I successfully got the animation to function properly. Initially, I attempted to implement the animation within a vue component, but it did not yield results. Upon relocating it outside of the component and onto the html page, the animation began working effectively. This indicates that Vue may be the root cause of the issue. While the solution is not flawless, it is preferable to having no functionality at all, and I do not wish to dedicate excessive time to resolving this matter.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for aligning div columns in HTML and CSS

My divs are displaying different heights based on content. I need a solution to make them all the same height without using bootstrap framework. Is there a way to achieve this with plain html/css, or perhaps with javascript/jquery/angularjs? Take a look ...

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

Inquiry about CSS3 transitions

Exploring the world of transitions in webkit. Currently experimenting with transitioning the dimensions of a div on hover and observed that the width is animated from the top and left of the div....but ideally, I want it to expand from the center of the ...

Develop expandable objects containing a set size of items using HTML and CSS

I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...

Styling rounded buttons with GTK and CSS

In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file. Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remo ...

Having issues with the CSS dropdown menu not activating when hovering

I am facing an issue with a simple menu that includes a dropdown feature upon hovering. The code works perfectly fine in Fiddle, however, it fails to work when running the entire page locally on IE. Can someone please assist me? (here's my code at fi ...

Choosing a unique font style in CSS (OTF) - How to differentiate between bold, italic, etc. when using multiple OTF files?

I'm a little confused on how to implement @font-face in my current project. The client handed over multiple font files including FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, and more. My usual approach wou ...

Resizing SVG to specify width in pixels and automatically adjust height

I'm having trouble understanding how SVG works. Can someone explain where my mistake is? Here's an example of my inline SVG code: <div style="width:1000px; height:auto; background-color:blue;"> <svg class="_image"><use xlink ...

How to make divs occupy the entire space of a parent div?

I've been scouring the website for a solution, but nothing I've found has been helpful. I'm attempting to create a grid within a containing div where a default (and eventually user-specified) number of divs will fill up the space. I'm t ...

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria: Show the "x" div if it's not already visible Display the "y" div only if the "x" div is already being displayed Show the "z" div only if both the "x" and "y" divs are alrea ...

Formatting text and images in CSS

Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? https://i.sstatic.net/fuPgl.png Thank you, Carolin #content_row{ margin-top:150px; marg ...

ReactStrap: If the dropdown list is too long, users may have trouble viewing the final values

Currently, I'm facing an issue with a dropdown list that is taking up the entire screen and hiding some items. Here's the code snippet for reference: const statusSearchDropDownValues = ( <Row className="align-items-center"> <Col c ...

Incorporate a comma after the second or third digit to separate currency values in JavaScript

Is there a way to add commas to currency values at the 3rd or 2nd place depending on the value itself? The desired output format is: 1000 => 1000 10000 => 10,000 210000 => 2,10,000 2010000 => 20,10,000 12010000 => 1,20,10,000 I am currentl ...

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

Tips for centering a flexbox on a webpage:

<template> <div> <div class="flex justify-center w-full"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div clas ...

JavaScript tip: Improve the way you highlight the current navigation page while scrolling by finding alternative methods to using "scrollY > x"

Currently, my webpage layout is divided into 4 sections - HOME, ABOUT, SKILLS, and CONTACT. Below is the JavaScript code I am using to highlight a specific section on the navigation bar based on the scroll position: let home = document.querySelector(" ...

Differences in font sizes across various browsers on Mac devices

In the given scenario, a navigation bar is displayed. The elements of this navigation bar have varying widths, but when combined together, their total width matches that of their container element, which is the ul. The problem arises when viewing the navig ...

Update the CSS styles

html document <ul id="navbar"> <li class="selected"> <a href="#"> HOME</a> </li> <li> <a href="#"> ABOUT US</a> </li> ...

Bring to life in both directions

I want to incorporate Animista animations to make a button scale in from the left when hovering over a div block, and then scale out to the left when the mouse moves out of the div block. Check out my code snippet below: http://jsfiddle.net/30sfzy6n/3/. ...

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace: this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product[&apos ...