1
振り子のように左から右に釘を振りながら2本の紐で貼り付けたパネルのアニメーションを作ろうとしています。ここにアニメーションコードとトランジション関数があります。デモのために、あなたは以下のスニペット確認することができます。アニメーションをスムーズに移行させるにはどうすればよいですか？
.headline {
display: flex;
justify-content: center;
margin-bottom: 40px;
margin-top: 150px;
}
.headline .box {
position: relative;
top: 10px;
left: -70px;
}
.headline .box:after {
content: "";
width: 45px;
height: 45px;
background: black;
position: absolute;
border-radius: 50%;
top: -85px;
left: 105px;
z-index: 10;
}
.headline .panel {
background: white;
color: #ff004f;
font-size: 46px;
font-family: "Quicksand", sans-serif;
padding: 10px;
font-weight: 700;
max-width: 250px;
display: block;
line-height: 46px;
position: relative;
}
.headline .panel:hover {
animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
animation: pendulum 2s infinite;
}
.headline .panel:before {
content: "";
width: 155px;
height: 10px;
background: white;
display: block;
transform: translateX(8px) rotate(148deg);
position: absolute;
top: -40px;
left: -16px;
border-radius: 5px;
}
.headline .panel:after {
content: "";
width: 150px;
height: 10px;
background: white;
display: block;
transform: translateX(-10px) rotate(-148deg);
position: absolute;
top: -40px;
right: -18px;
}
@keyframes pendulum {
0%,
50%,
100% {
transform: rotate(0deg);
transform-origin: 50% -50%;
}
25% {
transform: rotate(-25deg);
transform-origin: 50% -50%;
}
75% {
transform: rotate(25deg);
transform-origin: 50% -50%;
}
}
body {
background-color: #EEE;
}<div class="headline">
<div class="box">
<span class="panel">Test Panel</span>
</div>
</div>をそれは何らかの形で働いていたが、アニメーションは非常に滑らかで自然なロボットとではありません。このアニメーションを改善する方法を教えてください。
JSを使用する必要がある場合は、このケースでもjQueryを使用できます。
追加 "アニメーション：すべての無限;"あなたの@keyframeのすぐ下に、あなたはループを改善したいかもしれません。ちょうど更新：https://jsfiddle.net/ns1carpp/1/ –
Pauloありがとう！それは期待どおりに動作しませんでした、あなたはそれが各フレームの間に不具合を持っていたことがわかります、それは停止し続けました –
他の誰かがあなたを助けてくれることを嬉しく思って、私はCSSのアニメーションにも新しく、 http://autoprefixer.github.io/で最終的なCSSファイルを実行します。これは、ブラウザごとに異なるflexやその他の機能を使用しているため、古い/クロスブラウザのサポートです。 –