1) keyframes 이용
css 그대로 애니메이션을 이용하는 대신, animation을 지정시 ${}이용
import styled from "styled-components";
import { keyframes } from "styled-components";
const Container = styled.div`
display: flex;
`;
const animation = keyframes`
0%{
transform:rotate(0deg);
border-radius:0px;
}
50%{
transform:rotate(180deg);
border-radius:30px;
}
100%{
transform:rotate(360deg);
border-radius:50px;
}
`;
const Box = styled.div`
height: 100px;
width: 100px;
background-color: beige;
animation: ${animation} 1s linear infinite;
display: flex;
justify-content: center;
align-items: center;
span {
font-size: 20px;
&:hover {
font-size: 40px;
}
}
`;
function App() {
return (
<Container>
<Box>
<span>😚</span>
</Box>
</Container>
);
}
export default App;
마우스를 올려두면 이모지 크기가 커지게 하였다.
만약 코드 수정시 span -> p로 변경된다면, 코드 적용이 안된다는 문제점이 있다.
const Emoji = styled.span`
font-size: 20px;
`;
const Box = styled.div`
height: 100px;
width: 100px;
background-color: beige;
animation: ${animation} 1s linear infinite;
display: flex;
justify-content: center;
align-items: center;
${Emoji}:hover {
font-size: 40px;
}
}
`;
이렇게 되면 Box안에 속한 Emoji만이 hover 효과가 적용된다.