-webkit-animation의 효과에 빠져들에 신나게 애니메이션을 만들다가 아이패드,아이폰에서 뭔가 특정 오브젝트만 동작이 안되길래
뭔가 스크립트가 꼬여서 영향먹었나 살피다가 pc용 사파리에서도 동작이 안되서 살피니까ㅡ easing효과중에 easeInBack라던가 .~~` back등의
그래프를 한번 밖으로 튕겨나오는 bounce효과는 적용이 안된다. 그효과만 안먹는게 아니라 아예 애니매에션을 싸그리 안되게 해버린다,
기존에
@-webkit-keyframes fade {
0% {opacity:0}
100% {opacity:0}
}
@-webkit-keyframes sub_pic {
0% {-webkit-transform:translate(0,-10px);opacity:0}
100% {-webkit-transform:translate(0,0);opacity:1}
}
.l_banner .ct .sub_pic{position:absolute;top:180px;left:10px;width:174px;height:173px;background:url('../images/l_box.png') 0 0 no-repeat;background-size:174px;-webkit-animation:fade 1s 1,sub_pic .8s 1s cubic-bezier(0.000, 0.000, 0.580, 2.000) 1}
저 빨간색 부분이 작동이 안되서 이런식으로 수정한다.
@-webkit-keyframes sub_pic {
0% {-webkit-transform:translate(0,-10px);opacity:0}
90% {-webkit-transform:translate(0,2px);opacity:.8}
100% {-webkit-transform:translate(0,0);opacity:1}
}
.l_banner .ct .sub_pic{position:absolute;top:180px;left:10px;width:174px;height:173px;background:url('../images/l_box.png') 0 0 no-repeat;background-size:174px;-webkit-animation:fade 1s 1,sub_pic .8s 1s ease-out 1} //linear도 상관없다 그나마 비슷한 효과가 낫겠다 싶어서, 원래는 easeOutBack의 커스텀 효과
bounce의 효과 튕겨지는 것을 위해서 뭔가 편법스럽게, 저런식으로 키프레임에서 90%에서 마지막을 넘어서 갔다가,100%에서 원래의 100%자리로 돌아가면 된다.
아무튼 css3 webkit-animation만세! 기존에 jquey로 animate써서 만든걸 전부 css3로만 구현했다.
맨처음 시발점은 loading bar spinner no image 이 단어로 검색하다가 외국놈들 css로만 만들어본 소스와 거기서 반복되는 코드만 jqeury로 간단하게 돌려서 만든 소스를 보고 지금 만드는 샘플에 적용했는데 예상외로 좋다.
특히 애니메이션에 딜레이를 주어 순차적으로 돌아가는 부분도 잘먹고, display:none로 처리했다가 block처리하면 그순간부터 animation이 적용된다.