CSS3(transform/transition/animation) 기본 요약

1. CSS3의 새로운 스타일(일반)

//      
rgba(0,0,0,.5) 

//  (     )
border-radius: 5px 10px 15px 20px;

//  /    
text-shadow: 2px 3px 3px #000;         //x  ,y  ,    ,  (       )
box-shadow: (inset) 2px 3px 3px #000;  //   ,x  ,y  ,    ,  （     ）

//  /    （      ，         ）
background-image: -linear/radial-gradient(left/left top/deg,#ccc,#000,red 50%,...);//    ，     （        ）
background-image: -repeating-linear/radial-gradient(#ace 32%, #f96 36%);    //    ，      90deg

위와 같은 양식은 비교적 간단하고 사용하기 쉬우나 세심하게 사용하면 예상치 못한 많은 효과를 실현할 수 있고 매우 강하다는 것을 발견할 수 있다.이후에 다른 어떤 3D 효과, 점차적인 button, 금속 문자 효과 등을 만나면 상기 코드를 실현할 수 있다.간단한 아날로그 단추 button 응용 프로그램 e.g:

//HTML

<div class="box"><a href="">btn</a></div>



//CSS

.box a {

    display: block;

    width: 250px;

    color: #fff;
　　font-size: 70px;

    line-height: 1.5em;

    margin: 30px auto;

    text-decoration: none;

    border: 1px solid rgba(0,0,0,.3);

    //    CSS3  

    border-radius: 5px;

    text-shadow: 1px 1px 0 rgba(0,0,0,.4);

    box-shadow: 0 0 1px rgba(0,0,0,.4);

    background-image: -webkit-linear-gradient(90deg,#eaeaea,#c5c5c5); //webkit         

}

.box a:hover {

    background-image: -webkit-linear-gradient(-90deg,#eaeaea,#c5c5c5);

}

 
2. CSS3의 변형:transform(접두사 필요, 직접 추가)

rotate(30deg)  //  

translate(x,y)/translateX(x)/translateY(y) //  （x/y   ）
scale(x,y)/scaleX(x)/scaleY(y) //  
skew(x,y)/skewX(x)/skewY(y)  //  

//        ，           
transform-origin: x y;

//      
transform: rotate(30deg) scale(0.8,1.5) skew(30deg,-20deg);

 
3. CSS3의 변환 변환:transition(접두사 필요, 직접 추가)

//       -transition
-property: name; //      

-duration: time; //    

-timing-function: 

    ease    //  ，    

    linear  //  

    ease-in/out //  /   

    ease-in-out //     

    cubic-bezier(x1,y1,x2,y2) //          

-delay: time; //    

//      
transition: all .5s ease-in-out 1s;

참조: http://www.css88.com/archives/5403
 
4. CS3 애니메이션 제작:animation(keyframes)(접두사 필요, 직접 추가)
우선, 키 프레임 키 프레임을 정의하고 플래시 애니메이션을 배운 사람은 이 개념을 잘 알 수 있을 것이다

//        

@keyframes name {

  0%   {    }

  10%  {    }

  70%  {    }

  100% {    }          

}

//         

@keyframes name {

  from {    }

  to   {    }

}    

그리고 애니메이션 애니메이션을 정의합니다. 대부분의 속성은transition의 속성과 같아서 상세하게 쓰지 않았습니다.

//       -animation

-name: name;     //   (      )

-duration: time; //    

-timing-function: linear;   //       

-delay: time;    //    

-iteration-count: infinite; //   ，infinite    

-direction:   //    

    normal    //   

    alternate //           

-play-state: running/paused; //    ：  /  



//      

animate: name 3s ease-in-out 2s infinite alternate;