잡동사니에도 사랑을

[21.09.23]exam01(08_cssDynamic) - 일정시간 반복하여 모양이 바뀌는 애니메이션(@keyframes from ~ to) 본문

JAVA_EE/CSS

[21.09.23]exam01(08_cssDynamic) - 일정시간 반복하여 모양이 바뀌는 애니메이션(@keyframes from ~ to)

luvforjunk 2021. 9. 23. 22:15
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@keyframes bomb {
from { 
	font-size:500%;
}
to {
	font-size: 100%;
}
}
h3 {
	animation-name: bomb;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
</style>
</head>
<body>
	<h3>꽝!</h3>
	<hr>
	<p>꽝! 글자가 5초동안 500%에서 시작하여 100%로 바뀌는 애니메이션입니다. 무한 반복합니다.</p>
</body>
</html>

<!--
@keyframes
- @keyframes로 어떤 모양에서 어떤 모양으로 변할지를 지정한다.
- IE는 버전 10 이상에서 사용할 수 있다.

@keyframes name {
    0% { ... }
    n% { ... }
    100% { ... }
}
name : 애니메이션의 이름을 정합니다.
0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다.
n% : n% 일 때의 모양을 정합니다.
100% : 끝날 때의 모양을 정합니다. 100% 대신 to를 사용해도 됩니다.
 -->

 

 

 

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.23]exam03(08_cssDynamic) - 다양한 transform(rotate, skew, translate, scale 활용)  (0) 2021.09.23
[21.09.23]exam02(08_cssDynamic) - font-size에 대한 전환  (0) 2021.09.23
[21.09.23]exam03(07_cssShadowCursor) -  (0) 2021.09.23
[21.09.23]exam02(07_cssShadowCursor) -  (0) 2021.09.23
[21.09.23]exam01(07_cssShadowCursor) -  (1) 2021.09.23
'JAVA_EE/CSS' Related Articles more