CSS - 애니메이션 @keyframes :: 아빠개발자의 노트

CSS - 애니메이션 @keyframes

2019. 3. 2. 01:23

CSS 애니메이션은 자바스크립트로 표현하는 것보다 더 상세히 기술할수있는

용량을 줄이는 획기적인 방법이다.

transition 과 매우비슷 ~~(사실 뭐가 다르냐)~~

선언은 @keyframes 이름 { } 으로 기술하며

0% 부터 100% 까지 %로 선택하여 기술할수있다

from { } to { }로 할 수 도 있다.

@keyframes fadeIn {
   from{  // 0% 일때의 상태
      opacity : 0;   //투명도 0일땐 완전한 투명이고
  }
   to {  //100% 일때의 상태
      opacity : 1;   // 투명도 1일땐 완전한 불투명 이다
   }
}

◎ animation 과 transform 예제

▼ 내용

abcd

<html>
<head>
    <style>
        div{
            height:200px;
            width:200px;
            background:blue;
            color:White;
            font-size: 39px;
            transition: all .5s ease-in-out;
            /*모든 속성에대해 장면전환 transition 적용*/
            animation:  rotate 3.0s ease-in-out infinite;
            /*infinite 는 애니메이션 무한반복 rotate 는 keyframe 이름
            3초동안 div가 회전하면서 애니메이션 효과 무한 반복*/
            
        }
        div:hover{
            transform: rotate(5turn) scale(0.5,0.5);
            /*5번 회전 , 크기 1/2배로 줄임*/
            background-color : red;
            color : green;
        }

        @keyframes  rotate{
            0%{
                transform:none;
            }
            50%{
                transform:rotate(5turn) scale(.5 , .5);
                color: red;
                font-size:20px;
            }
            100%{
                transform:none;
            }
        }
    
    </style>
</head>
<body>
    <body>
        <div>안녕</div>
    </body>
</body>
</html>

css 애니메이션 참조하면 좋은 블로그

https://brunch.co.kr/@99-life/3

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo) (0)	2019.03.02
CSS - display 속성 (0)	2019.03.02
CSS - 선택자(selector) (0)	2019.03.02
CSS - @media 쿼리 (0)	2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION) (0)	2019.03.01

아빠개발자의 노트

CSS - 애니메이션 @keyframes

'디자인 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바