1
私はthis animationを作成しようとしています。このアニメーションはかなり複雑ですが、私がしたいのは、折りたたみアニメーションを示す半分の四角形を折り畳むことだけです。単純な四角形の折りたたみアニメーションを作成する
私はthis websiteにアクセスしました。私は、アニメーションを作成するためにスキュー機能を使用しようとしました。
これは私がこれまで使用しているコードです：
.elementLeft {
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
font-size: 1px;
animation: shakeback 2s infinite;
animation-direction: alternate;
color: white;
}
.elementRight {
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
/* transform: skew(20deg); */
font-size: 1px;
color: white;
animation: shake 2s infinite;
animation-direction: alternate;
}
@keyframes shake {
0% {
transform: skewY(0deg);
}
100% {
transform: skewY(45deg);
}
}
@keyframes shakeback {
0% {
transform: skewY(0deg);
}
100% {
transform: skewY(-45deg);
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}<div class="elementLeft"></div>
<div class="elementRight">
</div>Iが増加するにつれてスキュー機能はまた、正方形が長すぎるなりますので、これは私がしたい正確に何ではありません度。私はこのアニメーションを作成する別の方法を考えていましたが、私は何をすべきかわかりません。私はまた、折り畳むのではなく片側だけを折りたたむことを好みます。これは上に掲示されているGoogleカレンダーアイコンアニメーションのようなもので、アイコンの上半分は静止し、下半分は上に折り畳まれます。
編集：私はまた、この効果を形成するために正方形を上向きに回転させることができることに気付きました。しかし、アニメーションが滑らかに見えないので、私はまだ問題があります。
助けをもう一度いただきますようお願い申し上げます。
.element {
display: inline-block;
background-color: #000000;
height: 100px;
width: 100px;
}
.elementfold {
/* transform: rotateX(0deg); */
animation: foldup 5s;
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
}
@keyframes foldup {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(180deg) translate(0px, 100px);
}
}<li>
<div class="element"></div>
</li>
<li>
<div class="elementfold"></div>
</li>
私が試したさまざまなことの詳細について、さらに多くの詳細を追加しました。あなたが何らかの方法で助けることができるなら私に知らせてください！ –