CSSのtransitionなるものを調べていたら一部の項目は効かないことが分かった。
CSSにいつの間にかtransitionなるものが追加されていた。
アニメーションが非常に簡単に実装できるようになった。
しかし，あらゆる項目がtransitionでアニメーションされるわけではないようだ。この例での，line-heightは遷移前と遷移後それぞれに値の定義がないとアニメーションにならない。rightとかcenterとかの遷移もアニメーションにならないみたい（瞬時に適用される）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.8));
}
.sample {
transform: rotate(0deg);
clip-path: circle(40% at center);
background: skyblue;
position:absolute;
transition: 2s;
}
.sample720 {
transform: rotate(720deg);
clip-path: circle(40% at center);
background: skyblue;
position:absolute;
transition: 2s;
}
.rotate0 {
background: cornsilk;
transform: rotate(0deg);
transition: 2s;
position:absolute;
text-align:center;
vertical-align:middle;
line-height: 200px;
}
.rotate360 {
background: skyblue;
transform: rotate(360deg);
transition: 2s;
position:absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="sample" style="left:2vw;top:5vh;margin-top:6vh;width:200px;height:200px;text-align:center;vertical-align:middle;line-height: 200px;">TEST1</div>
<div class="rotate0" style="left:20vw;top:10vh;width:200px;height:200px;">TEST2</div>
</div>
<script>
function Transition() {
var element = document.querySelector("div.rotate0");
if (element) {
element.className = "rotate360";
} else {
element = document.querySelector("div.rotate360");
element.className = "rotate0";
}
element = document.querySelector("div.sample");
if (element) {
element.className = "sample720";
} else {
element = document.querySelector("div.sample720");
element.className = "sample";
}
return element;
}
setInterval(Transition, 2000);
</script>
</body>
</html>
TEST
