CSS _ 애니메이션 연습(1)

  <div class="box">
        <span>SIMULATOR</span>
        <span>SIMULATOR</span>
    </div>
    <div class="box1">
        <span>SIMULATOR</span>
        <span>SIMULATOR</span>
   </div>

 <style>

        * {
            margin:0;
            padding:0;
            box-sizing: border-box;
        }

        body {
            background: #111;
        }

        .box, .box1 {
            width: 100%;
            display: flex;
            overflow: hidden;
        }

        .box span {
            font-family: 'impact';
            font-size: 22.3vw; /* 1920px = 426px */
            color:#fc0;
            animation-name: moveLeft;
            animation-duration: 7s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
            animation-timing-function: linear; /* 속도를 등속도로 변경 */
        }
        .box1 span {
            font-family: 'impact';
            font-size: 22.3vw; /* 1920px = 426px */
            color:#fc0;
            animation-name: moveRight;
            animation-duration: 7s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
            animation-timing-function: linear; /* 속도를 등속도로 변경 */
        }

        /* animation */
        /* 
            transform
            %의 기준은
            자신의 가로또는 세로크기준
            x = 가로크기
            y = 세로크기
        */

        @keyframes moveLeft {
            0% { transform:  translateX(0);}
            100% { transform: translateX(-100%);}
        }
        @keyframes moveRight {
            0% { transform:  translateX(-100%);}
            100% { transform: translateX(0%);}
        }
    </style>

 

 

대표사진 삭제

• 사진 편집
•  
• 작게작게문서 너비문서 너비옆트임옆트임
•  
• 삭제삭제

사진 설명을 입력하세요.