CSS3 애니메이션을 사용하여 두 이미지 사이의 배경을 무한히 변경하면 steps (2)를 사용해도 이미지가 페이딩 효과가 있습니다. http : //jsfiddle.net/exdestroyer/hmb2m8ty/ `
body{
background: purple;
}
.rabbit{
width: 130px;
height: 224px;
background-size: 100%;
animation: jump 2s infinite steps(2);
}
@keyframes jump{
from{
background: url(http://segmentfault.com/img/bVp56q);background-size: 100%;
}
to{
background: url(http://segmentfault.com/img/bVp56r);background-size: 100%;
}
}`
그렇다면 문제를 해결하고 효과를 제거하는 방법은 무엇입니까?
왜 이런 일이 발생합니까?
초기 키 프레임이 하나의 이미지이고 마지막 키 프레임이 다른 이미지 인 애니메이션을 설정하면 해당 키 프레임에만 단일 이미지가 있습니다. 모든 중간 단계는 다른 단계와 혼합 된 다양한 정도를 가지고 있습니다.
단계 (2)를 설정하면 애니메이션이 이러한 중간 값 중 2 개만 사용하도록합니다. 하나는 단색 이미지입니다. 그러나 다른 하나는 하나의 50 %와 다른 하나의 50 %를 가질 것입니다.
2 개의 값만 사용하는 이와 같은 애니메이션을 원하면 키 프레임 중간에 급격한 변경을 설정해야합니다.
body{
background: purple;
}
.rabbit{
width: 130px;
height: 224px;
background-size: 100%;
animation: jump 2s infinite;
}
@keyframes jump{
0%, 49.9% {
background: url(http://segmentfault.com/img/bVp56q);background-size: 100%;
}
50%, 100% {
background: url(http://segmentfault.com/img/bVp56r);background-size: 100%;
}
}<div class="rabbit"></div>그 외에도 배경 이미지 변경 애니메이션에 대한 지원은 여전히 약합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다