Question 275215 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – can anyone identify why my css animation wosen't working

I’m working with the React web applications. when I try to apply animation to code tag it wasen’t showing the animation. My App.js is also simple and provided below

import './App.css';


export default function App() {
  return (
    <div className="App">
      <code>this is sample web page</code>
    </div>
  );
}

here is App.css

html{
  background-color: #282c34;
  color: white;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
    animation: spin 3s linear infinite;
}

.App {
  text-align: center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

I try to change to another tag like h1 instead of code it’s working with it normally.
note: using google chrome

Tags:

2

Answers


  1. 0

    Add a wrapper to your <code> tag and set the animation on the wrapper.

    For example:

    .code-wrapper{
  animation: spin 3s linear infinite;
}

.App {
  text-align: center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
    <div class="App">

  <div class="code-wrapper">
    <code>
      Hello world
    </code>
  </div>

</div>
    Login or Signup to reply.
  2. 0

    First of all, did you import the App.css stylesheet into html file?
    If yes, then try to apply the css to parent element div instead of code.
    I think the reason is because code element is inline element and it could not be animated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search