图像 (SandTimer) 动画 - HTML、CSS、Javascript

Question

I created a Loading screen using HTML and CSS . But i need to make the sandtimer image animated (Sandtimer rotating and sand pouring down from top). Any help would be much appreciated in animation. My code is given below.

<style type="text/css">

.load-modal-box{
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    width: 710px;
    height: 530px;
    background: -webkit-linear-gradient(top, #f1f1f1 65%, #f1f1f1 65%);
    z-index: 3;
    position: fixed;
    top: 76px;
    left: 46px;
    overflow: hidden;
}
 .load{
    height: 500%;
    width: 500%;
    position: absolute;
    z-index: 11;
    top: -40px;
}
</style>
  <div class = "load" id="loadmodalbox">
    <div class="load-modal-box">
        <img src="./images/sandtimerpngg.png" style="position: absolute;
    left: 300px;
    width: 80px;
    height: 100px;
    top: 170px">
    <h2 style="text-align: center;color: #6f7475;padding-top: 270px;">Loading.. Please wait..</h2>
    </div>
   </div>

Answer 1

As a developer, I am lazy! I quickly found an example by Travis Bernard of what you are trying to achieve on CodePen that uses only HTML and CSS.

Reference for more examples: https://codepen.io/tag/hourglass/

 *, *:before, *:after { box-sizing: border-box; } .hourglass { font-size: 2em; } div { width: 3.5em; height: 5em; border-style: solid; border-width: 2.5em 1.2em; border-color: blue transparent; border-radius: 10%; position: relative; animation: spin 5s linear infinite; } div:before { content: ""; width: 2.5em; height: 4.5em; border-style: solid; border-width: 2.25em 1.1em; border-color: white transparent transparent; border-radius: 10%; position: absolute; top: -2.25em; left: -.7em; animation: slideOut 5s linear infinite; } div:after { content: ""; width: 2.5em; height: 4.5em; border-style: solid; border-width: 0em 1.1em; border-color: transparent transparent white; border-radius: 10%; position: absolute; top: -2.25em; left: -.7em; animation: slideIn 5s linear infinite; } @keyframes spin { 0% { transform: rotation(0deg); } 90% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @keyframes slideOut { 0% { top: -2.25em; width: 2.5; border-width: 2.25em 1.1em; } 90% { top: 0em; width: 0; border-width: 0em 0em; left: .55em; } 100% { top: 0em; width: 0; border-width: 0em 0em; left: .55em; } } @keyframes slideIn { 0% { border-width: 0em 1.1em; } 90% { border-width: 2.25em 1.1em; } 100% { border-width: 2.25em 1.1em; } }

 <div class="hourglass"></div>