animationとtransformを組み合わせることで、
文字をズームさせることも出来る。
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ #test {
animation: zoom 5s ease -2s 1 normal;
}
@keyframes zoom {
0% {transform-origin:left top; transform:scale(2.0);}
100% {transform-origin:left top; transform:scale(1.0);}
}
</style>
</head>
<body>
<input type="checkbox" id="sample">
<div id="test">testです。</div><br><br>
<label for="sample"><strong>ここ</strong></label>を押してみて。
</body>
</html>
最終更新：2013年08月17日 18:33
