편집 기록

프로필 편집요청빌런님의 편집

날짜2020.02.27

크롬에서 왜 결과가 두번 나올까요?

animation

html

css

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: blue;
        -webkit-animation-name: change-bg;
        -moz-animation-name: change-bg;
        -o-animation-name: change-bg;
        animation-name: change-bg;
        -webkit-animation-duration: 3s;
        -moz-animation-duration: 3s;
        -o-animation-duration: 3s;
        animation-duration: 3s;
    }

    @-webkit-keyframes change-bg{
        from {
            background-color:blue;
            border:1px solid black;
        }
        to {
            background-color:#a5d6ff;
            border-radius:50%;
        }
    }
    @-moz-keyframes change-bg {
        from {
            background-color: blue;
            border: 1px solid black;
        }
        to {
            background-color: #a5d6ff;
            border-radius: 50%;
        }
    }
    @-o-keyframes change-bg {
        from {
            background-color: blue;
            border: 1px solid black;
        }
        to {
            background-color: #a5d6ff;
            border-radius: 50%;
        }
    }
    @keyframes change-bg {
        from {
            background-color: blue;
            border: 1px solid black;
        }
        to {
            background-color: #a5d6ff;
            border:1px solid blue;
            border-radius: 50%;
        }
    }
</style>
</head>

<body>
    <div></div>
</body>

책을 보면서 예제를 공부하는 중인데요 요걸 크롬에서 열면 처음 한번 애니메이션 효과가 실행되고 바로 밑에 동일한 효과가 한번 더 실행되네요 결과적으로 이어진 네모가 두개가 됩니다.. 이상해서 오페라에서 열어보니까 거긴 또 하나만 잘 실행되더라구요 무엇이 문제인걸까요?

프로필 알 수 없는 사용자님의 편집

날짜2020.02.26

크롬에서 왜 결과가 두번 나올까요?

animation

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: blue;
        -webkit-animation-name: change-bg;
        -moz-animation-name: change-bg;
        -o-animation-name: change-bg;
        animation-name: change-bg;
        -webkit-animation-duration: 3s;
        -moz-animation-duration: 3s;
        -o-animation-duration: 3s;
        animation-duration: 3s;
    }

    @-webkit-keyframes change-bg{
        from {
            background-color:blue;
            border:1px solid black;
        }
        to {
            background-color:#a5d6ff;
            border-radius:50%;
        }
    }
    @-moz-keyframes change-bg {
        from {
            background-color: blue;
            border: 1px solid black;
        }
        to {
            background-color: #a5d6ff;
            border-radius: 50%;
        }
    }
    @-o-keyframes change-bg {
        from {
            background-color: blue;
            border: 1px solid black;
        }
        to {
            background-color: #a5d6ff;
            border-radius: 50%;
        }
    }
    @keyframes change-bg {
        from {
            background-color: blue;
            border: 1px solid black;
        }
        to {
            background-color: #a5d6ff;
            border:1px solid blue;
            border-radius: 50%;
        }
    }
</style>
</head>

<body>
    <div></div>
</body>