이미지가 커지는 애니메이션 효과질문 입니다.
본문
홈페이지 메인인트로 이미지에 효과를 주려고 합니다.
자동으로 슬라이딩 되는부분은 만들었는데
이미지가 커지는 부분이 좀 어렵네요
정보를 검색해 보았지만 마우스 hover시에 작동되는 것만 있을뿐 hover없이 작동되는것은 찾을 수 없어서 질문 올립니다.
답변 3
animation transition css 주시면 될것같아요!
animation
@keyframes test {
0% {transform: scale(1)}
100% {transform: scale(1.2);
}
transition: all 1.25s ease;
css 선택자에서 :hover 부분을 빼고 쓰면 호버시가 아닌 일반상태에서 동작됩니다
<div class="image-box">
<div class="image"></div>
</div>
<style>
.image-box{
width:300px;
overflow:hidden;
}
.image {
width:300px;
height:200px;
background: url("https://picsum.photos/300/200/");
background-position:center;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.image:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2); /* IE 9 */
transform: scale(1.2);
}
</style>
이게 이미지 확대하는 애니메이션인데
.image:hover { 여기에 hover을 빼면
이미지가 첨부터 확대되서 나옵니다 이런걸 찾으시나요?
첨부터 확대가 아닌 천천히 확대가 되는 애니메이션을 찾고있습니다!
예를 들면 https://www.ilbaeumteo.net/ 이곳처럼입니다!
답변을 작성하시기 전에 로그인 해주세요.