TIL #3 | CSS Animation ( feat. @keyframes, perspective)
10604 단어 TILcss animation프론트엔드스쿨TIL
CSS Animation
transition, tranform
이전에 프로젝트할 때는 애니메이션을 크게 쓸일이 없었다. 단순히 카드이미지 위에 호버하면 크기가 약간 커지는 정도가 다였기 때문에 애니메이션에 대해서 이렇게 자세히 알아본건 이번이 처음이였다.
단순히 transition, transform과 hover만 이용해도 css를 동적으로 만들 수 있다.
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s;
}
div:hover {
background-color: blue;
transform: scale(2.5);
}
</style>
@keyframes
여기에 @keyframes
를 이용한다면 더 자유롭게 원하는 애니메이션을 만들어줄 수 있다.
<style>
@keyframes travel {
0% {
transform: translate(0px, 0px);
}
16.6% {
transform: translate(200px, 0px);
}
33.3% {
transform: translate(200px, 200px);
}
49.9% {
transform: translate(0px, 200px);
}
66.6% {
transform: translate(200px, 200px);
}
83.3% {
transform: translate(200px, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
div {
width: 100px;
height: 100px;
background: pink;
animation: travel 3s;
}
</style>
perspective
지금까지는 2차원의 움직임이였다. 하지만 perspective를 이용하면 3차원을 움직이는 것처럼 꾸밀 수 있어진다.
<style>
.cont-card {
perspective: 800px;
}
.item-card {
width: 100px;
height: 100px;
transform: scale(0.5) rotateY(360deg);
background: #f2994a;
transition: all 1.2s;
}
.item-card:hover {
transform: scale(2) rotateY(0deg);
background-color: aqua;
}
</style>
<!-- html -->
<body class="cont-card">
<div class="item-card">hello world</div>
</body>
위와 같이 perspective를 이용해서 물체와 나와의 거리감을 표현할 수 있다.
마무리
오늘은 이렇게 css의 애니메이션 요소들에대해서 배웠다. 이전에는 자주 이용하지는 않았지만 애니메이션 요소를 잘 이용하면 웹페이지를 더 지루하지 않아 보이게 만들어줄 수 있어 다음 프로젝트에 적절히 이용해보면 좋을 것 같다.
Author And Source
이 문제에 관하여(TIL #3 | CSS Animation ( feat. @keyframes, perspective)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@do_dadu/TIL-3-CSS-Animation-feat.-keyframes-perspective저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)