css3 애니메이션 시작

css3에서 애니메이션 효과를 만들 수 있으며 페이지의 변화가 더욱 부드럽게 연결됩니다.css3@keyframes 규칙은 애니메이션을 만드는 데 사용됩니다.@keyframes에 애니메이션의 시작 및 끝 스타일을 지정합니다.
@keyframes 실례 만들기

（   -webkid-     chrome safari）
@-webkit-keyframes loading {
     
    from {
     opacity: 1;width:5px;height:20px;}
    to {
     opacity: 0.25;width:5px;height:20px;}
  }

요소에 애니메이션 바인딩

div {
     
  //     0
    -webkit-animation: loading 1.2s ;//loading      。         
  }

애니메이션의 스타일과 횟수는 제한이 없고 백분율로 변경할 시간을 설정할 수 있으며 from과 to는 백분율의 0과 100%와 같다.
인스턴스

@-webkit-keyframes loading {
     
    0% {
     opacity: 1;width:5px;height:20px;}
    50% {
     opacity: 0.5;width:5px;height:20px;}
    100%{
     opacity: 0.1;width:5px;height:20px;}
  }

@keyframes의 모든 속성도 따로 정의할 수 있습니다
animation-name: 연결된 애니메이션의 명칭을 규정합니다 animation-duration: 애니메이션이 한 주기를 완성하는 시간을 규정합니다 animation-delay: 애니메이션이 언제 시작되는지 규정하고 기본 0 animation-iteration-count: 재생 횟수를 규정합니다.기본값 1
전체 예:

<style>
    @-webkit-keyframes one{
     
        0%{
     background:blue;width:100px;height: 20px;}
        50% {
     background:red;width:150px;height: 20px;}
        100% {
     background:green;width:100px;height: 30px;}
    }
    #one{
     
        width: 100px;
        height: 20px;
        background-color: brown;
        -webkit-animation: one 1s ;
    }
</style>
<div id="one"></div>