HTML / CSS - 15 (2021.03.6)

#banner>ul>li.fadein{ 
    animation: fadein 3s;

}


@keyframes fadein{
    from{
        opacity:0;
    }
    to{
        opacity: 1;
    }
}

animation

다수의 스타일을 전환하는 애니메이션을 적용. 

 

animation 속성

/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

 

• animation-duration: 애니메이션의 한 사이클 당 시간
• animation-name:  사용할 애니메이션의 이름을 정함.  
• animation-delay: 애니메이션이 시작할  지점을 지정.

@keyframes

지정된 애니메이션의 중간상태에 대해 정의함.  

• from은 애니메이션 사이클의 시작 지점. 
• to는 애니메이션 사이클의 마지막 지점. 
• 0%(=from) 50%   70% 100%{=to)를 사용해서 정할 수도 있음. 

 

opacity

투명도를 지정하는 속성 

0이 투명, 1이 불투명