HTML 애니메이션 효과주기 (ASP.NET)

1. 효과를 줄 위치.

<div class="a">
</div>

2. 스타일을 준다.

3. @keyframes를 사용해야하는데 아래처럼 오류가났다.

검색결과 ASP.NET에서는 이렇게 써야한다. (@가 레이저문법이어서 그런것 같음.)

바운스하는듯한 효과를 줄수 있다!

 

- style 총 코드

<style>
    .aa {
    position: absolute;
    background-image:url("이미지주소");
    width:500px;
    height: 500px;  

    animation-name: bounce;
    animation-duration:3s;
    animation-iteration-count:10;
    }

    @@keyframes bounce {
        0%,100% {
        bottom:0px;
        }
        50% {
        bottom:200px;
        }
    }
</style>