21-12-02 CSS 애니메이션#2
예제
사진에 마우스를 올리면 큰 이미지를 보여주는 화면 구현
<style type="text/css">
.view{position:relative; width:600px; height:600px; margin:0 auto; overflow: hidden;}
.bigimg{position:absolute; left:0; top:0px; background: silver; width:600px; height:400px; font-size:130%; font-weight:bold; color:white; line-height:400px; text-align:center;}
.box1{position: absolute; bottom:0px; border-radius: 100px; overflow: hidden; width:198px; height:198px; }
#btn_img1{left:0px;}
#btn_img2{left:200px;}
#btn_img3{left:400px;}
.box2{position:absolute; top:0px; left:-600px; transition: 1s;}
#btn_img1:hover~#view_img1{transform: translateX(600px);}
#btn_img2:hover~#view_img2{transform: translateX(600px);}
#btn_img3:hover~#view_img3{transform: translateX(600px);}
</style>
*3D rotate : perspective
x축, y축을 기준으로 회전하는 물체를 입체적으로 보여지도록 해주는 속성
perspective 수치는 관찰의 시점을 의미하며 숫자가 작아질수록 원근 변화가 크게 나타난다.
<style type="text/css">
.pers, .no-pers {width:152px; height: 180px; border: 1px solid black; float: left;
margin: 30px;}
.s {transition: 0.5s;}
.pers .rotatex{perspective: 300px;}
.pers .rotatey{perspective: 300px;}
.rotatex img:hover{transform: rotateX(50deg);}
.rotatey img:hover{transform: rotateY(50deg);}
</style>
</head>
<body>
<h4>원본 이미지</h4>
<div><img src="images/sunset.jpg" alt=""></div>
<div class="no-pers">
<div class="rotatex"><img src="images/sunset.jpg" class="s"></div>
</div>
<div class="no-pers">
<div class="rotatey"><img src="images/sunset.jpg" class="s"></div>
</div>
<div class="pers">
<div class="rotatex"><img src="images/sunset.jpg" class="s"></div>
</div>
<div class="pers">
<div class="rotatey"><img src="images/sunset.jpg" class="s"></div>
</div>
</body>
왼쪽 두 이미지는 perspective를 적용하지 않았고 오른쪽 두 값은 perspective: 300px을 적용했다
perspective를 100px로 적용하면 좀 더 역동적으로(...) 회전한다.
*이벤트가 없어도 움직이는 오브젝트 구현하기 : @keyframe
변화될 애니메이션의 변경요소를 change-bg 라는 이름으로 정의(다른 이름도 됨)한다.
from은 최초 상태를 to는 변화된 상태를 의미한다.
from에 기술된 속성을 원래 요소가 가지고 있는 상태에 더하고 to에 기술된 속성으로 변화하는 것.
@keyframes change_bg{
from{ }
to{ }
}
기본형태는 위와 같다.
해당 애니메이션이 필요한 요소의 CSS에 animation-name: change-bg; 를 넣어주면 애니메이션이 실행되도록 설정됨
<style type="text/css">
#a {width: 200px; height: 200px; background: blue; margin: 20px; animation-name: change_bg;
animation-duration: 2s;}
#b {width: 200px; height: 200px; background: green; margin: 20px; animation-name: change_bg;
animation-duration: 2s;}
/*애니메이션 키프레임의 정의*/
@keyframes change_bg{
from{border:1px solid black}
to{background: #a5d6ff; border: 1px solid red; border-radius: 50%;}
} /*from 에서 부터 to까지 움직임 또는 변화를 정의*/
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
반복 설정은 하지 않았으므로 페이지가 처음 로드될 때(새로고침 했을 때) 한 번만 실행된다.
예시
두개의 div에 서로 다른 효과 적용하기
<style type="text/css">
div{width: 200px; height: 200px; float: left; margin: 50px;}
#box1{background: #4cff00; border: 1px solid black; animation-name: shape;
animation-duration: 2s;}
#box2{background: #8f06b0; border: 1px solid black; animation-name: rotate;
animation-duration: 2s;}
@keyframes shape {
from{border: 1px solid black}
to{border-radius: 50%;}
}
@keyframes rotate {
from{transform: rotate(0deg);}
to{transform: rotate(45deg);}
}
</style>
*애니메이션 반복 실행하기
*animation-iteration-count : 숫자를 지정하면 그 횟수만큼 반복, infinite를 쓰면 무한 반복한다.
*animation-direction : 애니메이션의 진행방향. 지정되어있지 않으면 정방향(from->to) reverse로 지정하면 역방향, alternate로 지정하면 정방향 한번 역방향 한번이 번갈아 진행된다 .
<style type="text/css">
.box{position:relative; height: 60px; width: 400px; padding-left: 50px; font-size: 150%;
line-height: 60px; background: orange; animation-name: moving; animation-direction: alternate;
animation-duration: 5s; animation-iteration-count: infinite;}
@keyframes moving{
from{opacity:1; left:-110%;}
to{opacity:0.2; left: 105%;}
}
</style>
※alternate는 반복횟수를 2회 이상 지정해야 작동을 확인할 수 있다.
예시
<style type="text/css">
.box{position:relative; height: 60px; width: 400px; padding-left: 50px; font-size: 150%;
line-height: 60px; background: orange; animation-iteration-count: infinite;
animation-name: moving; animation-direction: alternate; animation-duration: 2s;
perspective: 300px; transform-origin: right;}
@keyframes moving{
from{transform: rotatey(0deg);}
to{transform: rotatey(180deg);}
}
</style>
앞선 예시에서 perspective:300px, transition-orgin:right 속성을 추가하고 keyframes 속성을 수정했다.
*keyframes 50%
from 과 to 사이에 %를 넣어 중간 단계를 지정할 수 있다.
@keyframes rotate{
from{background: red; transform: perspective(120px) rotateX(0deg) rotateY(0deg);}
50%{background: green; transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
to{background: blue; transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}
