크롬에서 왜 결과가 두번 나올까요?
조회수 445회
<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>
책을 보면서 예제를 공부하는 중인데요 요걸 크롬에서 열면 처음 한번 애니메이션 효과가 실행되고 바로 밑에 동일한 효과가 한번 더 실행되네요 결과적으로 이어진 네모가 두개가 됩니다.. 이상해서 오페라에서 열어보니까 거긴 또 하나만 잘 실행되더라구요 무엇이 문제인걸까요?
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
댓글 입력