Younho9 Notes2021-12-12
CSS 애니메이션
css
/** 아래에서 위로 나타나는 애니메이션 */
@keyframes showItem {
from {
transform: translateY(20px) scale(1.6);
opacity: 0;
color: aqua;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.stagger-item {
animation: showItem 0.5s;
animation-fill-mode: both;
}
.stagger-item:nth-child(1) {
animation-delay: 0.07s;
}
.stagger-item:nth-child(2) {
animation-delay: 0.14s;
}
.stagger-item:nth-child(3) {
animation-delay: 0.21s;
}
.stagger-item:nth-child(4) {
animation-delay: 0.28s;
}
.stagger-item:nth-child(5) {
animation-delay: 0.35s;
}
/** 아래에서 위로 나타나는 애니메이션 */
@keyframes showItem {
from {
transform: translateY(20px) scale(1.6);
opacity: 0;
color: aqua;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.stagger-item {
animation: showItem 0.5s;
animation-fill-mode: both;
}
.stagger-item:nth-child(1) {
animation-delay: 0.07s;
}
.stagger-item:nth-child(2) {
animation-delay: 0.14s;
}
.stagger-item:nth-child(3) {
animation-delay: 0.21s;
}
.stagger-item:nth-child(4) {
animation-delay: 0.28s;
}
.stagger-item:nth-child(5) {
animation-delay: 0.35s;
}
framer-motion
ts
import type {NextPage} from 'next';
import {motion} from 'framer-motion';
const Home: NextPage = () => {
debugger;
return (
<div>
<motion.div initial={{y: -200, opacity: 0}} animate={{y: 0, opacity: 1}}>
<p>
A Prophet sat in the market-place and told the fortunes of all who
cared to engage his services. Suddenly there came running up one who
told him that his house had been broken into by thieves, and that they
had made off with everything they could lay hands on.
</p>
</motion.div>
</div>
);
};
export default Home;
import type {NextPage} from 'next';
import {motion} from 'framer-motion';
const Home: NextPage = () => {
debugger;
return (
<div>
<motion.div initial={{y: -200, opacity: 0}} animate={{y: 0, opacity: 1}}>
<p>
A Prophet sat in the market-place and told the fortunes of all who
cared to engage his services. Suddenly there came running up one who
told him that his house had been broken into by thieves, and that they
had made off with everything they could lay hands on.
</p>
</motion.div>
</div>
);
};
export default Home;