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
2
Answers
Add a wrapper to your
<code>
tag and set the animation on the wrapper.For example:
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.