본문 바로가기

코딩/HTML, CSS

animation속성 forwards, willchange

728x90

animation 속성 
forwards는  keyfrmaes마지막 속성 값을 애니메이션이 끝나고나서도 유지한다


@keyframes hideSplashScreen{
    from{
        opacity:1;
    }
    to{
        opacity:0;
        visibility: hidden; /* 마우스에걸리지 않게 빼는 것
        but ,element는 그대로 남아있다.chrome 개발자도구에서 확인 가능 함.  없애고싶다면 자바스크립트 사용해야함*/
        }
}
 /*opacity가 0이 된 상태로 유지하는 거지 element가 사라진 것이 아니라 다른 다른 버튼 클릭 안됨*/

animation 속성 willchange
will-change: transform;브라우저에게 어떤 것이 변경 될 것인지 미리 말해주는 것 
주로 흔들리거나 문제가 있을 때 사용하면 해결 됨

'코딩 > HTML, CSS' 카테고리의 다른 글

폰트에 그라디언트 넣기  (0) 2021.10.14
자잘한 팁  (0) 2021.10.11
중앙 정렬 방법, header 정렬  (0) 2021.10.11
BEM / Block, Element, Modifier  (0) 2021.10.11
justify-content , align-items 사용 예제  (0) 2021.10.10