html - remove opening and closing animation -


i have css of pacman eating animation in css. how can remove opening , closing animation , make mouth remain open

.loader{position:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}  .circles{position:absolute;left:-5px;top:0;height:60px;width:180px}  .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:grey}  .circles span.one{right:80px}  .circles span.two{right:40px}  .circles span.three{right:0px}  .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear}  @-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}  @keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}  .pacman{position:absolute;left:0;top:0;height:60px;width:60px}  .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1c163a}  .pacman span{position:absolute;top:0;left:0;height:60px;width:60px}  .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:yellow}   .pacman .top::before{top:0;border-radius:60px 60px 0px 0px}  .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px}  .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px}  .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite}  @-webkit-keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}  @keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}  .pacman .bottom{-webkit-animation:animbottom 0.5s infinite;animation:animbottom 0.5s infinite}  @-webkit-keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}  @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}
<div class="loader">    <div class="circles">      <span class="one"></span>      <span class="two"></span>      <span class="three"></span>    </div>    <div class="pacman">      <span class="top"></span>      <span class="bottom"></span>      <span class="left"></span>      <div class="eye"></div>    </div>  </div>

change 2 css classes adds animation

.pacman .top , .pacman .bottom change to:

.pacman .bottom{   -webkit-transform:rotate(45deg);transform:rotate(45deg) } .pacman .top{   -webkit-transform:rotate(-45deg);transform:rotate(-45deg) }

so looks this: 

.loader{position:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}  .circles{position:absolute;left:-5px;top:0;height:60px;width:180px}  .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:grey}  .circles span.one{right:80px}  .circles span.two{right:40px}  .circles span.three{right:0px}  .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear}  @-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}  @keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}  .pacman{position:absolute;left:0;top:0;height:60px;width:60px}  .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1c163a}  .pacman span{position:absolute;top:0;left:0;height:60px;width:60px}  .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:yellow}   .pacman .top::before{top:0;border-radius:60px 60px 0px 0px}  .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px}  .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px}    .pacman .bottom{-webkit-transform:rotate(45deg);transform:rotate(45deg)}  .pacman .top{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
<div class="loader">    <div class="circles">      <span class="one"></span>      <span class="two"></span>      <span class="three"></span>    </div>    <div class="pacman">      <span class="top"></span>      <span class="bottom"></span>      <span class="left"></span>      <div class="eye"></div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more