インタラクションなしでボタンを自動縮小する

Question

私のサイトの右上にメニューボタンを追加したいのですが、アイコン付きの単純な円です。特定の高さと幅でロードしてから、しばらくしてから別の高さと幅に自動的に縮小したいと思っています。

これは可能ですか？

CSSの看護師は誰ですか？

多くのおかげで、

Answer 1

あなたはCSS3アニメーションでそれを行うことができます。

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #00f; 
 
    border-radius: 50%; 
 
    animation-name: shrink; /* "calling" the animation */ 
 
    animation-duration: 1s; /* adjust */ 
 
    animation-timing-function: linear; /* specifies the speed curve of an animation/also try other values */ 
 
    animation-delay: 3s; /* adjust */ 
 
    animation-fill-mode: forwards; /* retains in the state set by the last keyframe */ 
 
} 
 

 
@keyframes shrink { /* let's call it "shrink" */ 
 
    0% {width: 50px; height: 50px} 
 
    100% {width: 25px; height: 25px} /* final state */ 
 
}

<div><div>

実験し、ニーズに合わせて調整。

注：あなたは何ができるかを確認するために詳しく見てかかることがありますので、他のアニメーションプロパティ&値もあります。