<style>
.blink {
-webkit-animation: blink 2.5s linear infinite;
}
@-webkit-keyframes blink {
0% { background-color: red; }
33% { background-color: yellow; }
66% { background-color: blue; }
100% { background-color: green; }
/* from { background-color: red;}
to {background-color: green;} */
}
</style>
This is <span class="blink">blinking</span> text.
This is blinking text.
보통 javascript로 하던, 해당 객체의 각종 속성을 주기적으로 변화를 주면 흔히 말하는 애니메이션 효과를, css로도 할 수 있다.
물론.. IE9 이하버전이라던가, 예전 웹브라우저에서는 안되는 기능이기 때문에 아직 우리나라에선 javascript로 짜는게 여러모로 편할 수 있지만 말이다..
위 소스를 실행 시켜 보면 주기적으로 "blinking"부분의 배경이 바뀌는것을 볼 수 있을 것이다.
좀 더 자세히 알고 싶다면 아래의 링크로 가면 된다.
링크 :
http://ysd1213.tistory.com/entry/CSS3-keyframes-animation
삭제 대비용 원본글 복사
@keyframes animationname {keyframes-selector {css-styles;}}
@keyframes mymove{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */{
from {top:0px;}
to {top:200px;}
}
@keyframes 내부에 css 스타일을 정의하고 animation 은 “from”에 정의된 스타일에서 출발하여 “to”에 새롭게 정의된 스타일로 점차적으로 변화되는 것이다. from 에서 to까지과정에서 변화를 주려면 아래와 같이 정의 한다.
@keyframes mymove{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
CSS3의 애니메이션 관련 속성 4가지
1. animation-duration : 애니메이션의 동작 시간('1s','0.5s'와 같은 형식으로 지정)
2. animation-iteration-count : 애니메이션의 동작 회수('infinite'를 지정하면 무한 반복)
3. animation-name : 애니메이션의 이름
4. animation-timing-function : 애니메이션의 타이밍
animation-timing-function 속성에 지정할 수 있는 값의 의미 6가지
1. ease : 시작과 종료를 부드럽게
2. linear : 일정
3. ease-in : 서서히 시작
4. ease-out : 서서히 종료
5. ease-in-out : 서서히 시작하여 서서히 종료
6. cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정
CSS3의 애니메이션 관련 속성 4가지
1. animation-duration : 애니메이션의 동작 시간('1s','0.5s'와 같은 형식으로 지정)
2. animation-iteration-count : 애니메이션의 동작 회수(디폴트1, 'infinite'를 지정하면 무한 반복)
3. animation-name : 애니메이션의 이름
4. animation-timing-function : 애니메이션의 타이밍
5. animation-direction:normal,alternate (alternate적용시 부드럽게)
Transform
transform:translate(X크기,Y크기) : x,y크기만큼 이동
transform:translateX(X크기) : x크기만큼 이동
transform:translateY(Y크기) : y크기만큼 이동
transform:scale(X크기,Y크기) : x,y배율만큼 늘어나거나 줄어듬
transform:scaleX(X크기) : x크기만큼 확대나 축소
transform:scaleX(Y크기) : y크기만큼 확대나 축소
transform:skew(X각도,Y각도) : x,y만큼 기울이기
transform:skew(X각도) : x만큼 기울이기
transform:skew(Y각도) : y만큼 기울이기
transform:rotate(각도) : 각도만큼 회전
Ex)
한줄로 쓸때
span.cloud_low{
-webkit-animation:cloud_low ease-in-out 2s infinite alternate;
animation:cloud_low ease-in-out 4s infinite alternate;
}
여러줄로 쓸때
span.cloud_low {
-webkit-animation-name:cloud_low; /* @ keyframes 애니메이션의 이름을 지정한다. */
-webkit-animation-timing-function:ease-in-out; /* 애니메이션이 사이클 동안 어떻게 진행되는가를 설명한다. 디폴트는 "ease" */
-webkit-animation-duration:2s; /* Default 0 애니메이션 한 사이클을 완료하는데 걸리는 초 또는 밀리 초를 지정한다 */
-webkit-animation-iteration-count:infinite; /* 애니메이션이 재생되는 횟수를 지정한다. */
-webkit-animation-direction:alternate; /* 애니메이션을 역방향으로 재생해야 할지 여부를 지정한다. */
-webkit-animation-delay:0; /* 애니메이션 시작 될 때 지연 시간을 지정한다. 디폴트는 0 */
-webkit-animation-play-state:running; /* 애니메이션을 실행하거나 일시 정지 여부를 지정 디폴트는 "running */
}
@-webkit-keyframes cloud_low {
0% {-webkit-transform:translate(0px, 0px); opacity:0.5;} /* from */
100% {-webkit-transform:translate(0px, 8px);} /* to */
}