<html>
<head>
<style>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.box2 {
margin-top:100px;
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #eee;
animation: test 2s ease-in infinite alternate;
}
svg { width:200px; height:200px;}
.st0{
fill:#000;animation: cart 2s ease-in infinite alternate;}
@-webkit-keyframes cart {
from {
opacity:0.1;
}
to {
opacity:1;
}
}
test {
from {
transform: none;
}
to {
transform: translateX(10px) rotate(10deg) translateY(5px);
}
}
.slidein {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
animation-name: slidein;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body onload="setup()">
<h1 id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>h1</code> elements
move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
<ul id="output">
</ul>
<p>아래 박스는 width, height, background-color, transform을 위한 트랜지션을 결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.</p>
<div class="box"></div>
<div class="box2"></div>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<g>
<path class="st0" d="M14.9,30.8c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.3-3.3,3.3c-1.8,0-3.3-1.5-3.3-3.3
C11.6,32.3,13.1,30.8,14.9,30.8z"/>
<path class="st0" d="M29.5,30.8c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.3-3.3,3.3c-1.8,0-3.3-1.5-3.3-3.3
C26.1,32.3,27.6,30.8,29.5,30.8z"/>
<path class="st0" d="M37.9,12.6c-4.2,0-20.5,0-20.5,0s-1.2,0.3-1.2,1.6c0,1.3,1.2,1.7,1.2,1.7h18.4l-1,3.5c-5,0-18.1,0-18.1,0
s-1.1,0.3-1.1,1.5c0,1.2,1.1,1.6,1.1,1.6h17.1h0l-1,3.3H14.2L13,15.9l-0.4-3.3c0,0-0.4-3.1-0.6-4.3C11.8,6.9,8.6,5.3,1.8,2.1
c-1.6-0.7-3,2.3,0,3.8l5.4,2.5c0,0,1.3,0.7,1.4,1.7c0.1,1,2.3,17.3,2.3,17.3s0.1,2.3,2.1,2.3c2.1,0,18.9,0,20.6,0
c1.7,0,2.1-1.8,2.1-1.8l4.1-12.1C39.8,15.7,41,12.6,37.9,12.6z"/>
</g>
</svg>
<script>
function setup() {
var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
var e = document.getElementById("watchme");
e.className = "slidein";
}
function listener(e) {
var l = document.createElement("li");
switch(e.type) {
case "animationstart":
l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
l.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
}
</script>
</body>
</html>
<!-- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations 에니메이션 -->
<!-- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions 트랜지션 -->
<!-- https://developer.mozilla.org/ko/docs/Web/CSS/transform 트랜스폼 -->