반응형

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

+ Recent posts