· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT

(즐거웅코드) CSS 왼쪽에서 오른쪽으로 이동하며 페이드인(fade in) 되는 애니메이션

즐거 '웅' 인생 2021. 9. 16. 07:56
반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<style>
    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
 
    .test_obj {
        position: relative;
        animation: fadeInLeft 1s;
    }
</style>
 
<div class="test_obj">테스트 중입니다.</div>
구현 예시
반응형
저작자표시