I want to implement an animation that increases the number using a styled component.
const Info = styled.div`
margin-left: 35rem;
margin-top: -15rem;
p {
display: inline-block;
width: 25rem;
padding: 1rem;
white-space: nowrap;
overflow: hidden;
font-weight: 500;
strong {
font-weight: 600;
@property --num {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}
}
}
animation: ${ImgFade} 0.7s linear;
animation-delay: 0.1s;
`
<Info>
<p>
<strong>350</strong>User
</p>
</Info>
I'm using @property(css property), it seems not work..