html - How to make div bigger as it spins (CSS3 Animation) -

-

i spin div when hover on , spin want make bigger zoom in.

so far have this:

[html]

    div class="mymsg"> <p id="welly" style="color: #009">welcome y3!<br><br><br>thanks stopping by!</p> </div>

[css]

.mymsg { background: white; width: 800px; height : 500px; margin: 100px auto; border: 1px solid black; opactiy: 0.5; -webkit-transform: rotate(360deg); /* safari , chrome */ -webkit-transform: scale(.1,.1) skew(45deg) translatex(-300px); box-shadow: 0px 0px 200px grey; }  .mymsg:hover {     opacity: 1;     -webkit-transform: rotate(360deg); /* safari , chrome */     -webkit-transform: scale(1,.1 skew(0deg); box-shadow: 0px 0px 200px grey; }

so want spin before scaling regular size

any appreciated

first, show can done.

now that's out of way, let's down nitty gritty , show how it.

first, you'll want use animation animate properties , rotation effect. sadly, transition won't enough since transitioning between 0 , 360 means aren't going anywhere. so, animate properties 1 other on hover. code end looking this:

@keyframes spin {     { transform: scale(.1,.1) skew(0deg) rotate(0deg); }     { transform: scale(1,1) skew(0deg) rotate(360deg); } } .mymsg:hover {     animation: spin 1s forwards; }

the @keyframes defines animation happen, , want transform 1 set of properties final one. then, set :hover play animation. relevant properties animation animation-name, animation-duration, , animation-fill-mode (which should have same properties last frame when done animating. webkit requires prefixes, you'll want put in too.

in addition this, placed transition: transform 1s; on .mymsg class animate after mouse moves away. note webkit doesn't seem play nice interaction between two, bit choppy , less ideal. but, experimental properties this, get.

some side notes:

  • your css isn't cross browser compatible, should clean bit
  • you're defining 1 transform property, , overriding it. transforms need go in same declaration. can't combined that

Comments

Post a Comment

Popular posts from this blog

java - Run a .jar on Heroku -

-
i trying run .jar file on heroku, , can't find instructions anywhere on how this. have read wants me compile uploading heroku. possible, , if is, how this? if helps, trying run minecraft craftbukkit server, , don't have pom.xml file yet. you didn't provide details i'll try give , people reaches question way it. first of all, create heroku account , create heroku application (assumed have done that). second, need generate application jar , upload heroku. so, open terminal , install heroku cli (assuming unix terminal): $ sudo npm install -g heroku-cli you need have npm , nodejs installed, can check link: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04 once done that, can use npm update node version acceptable heroku-cli: $ sudo npm install -g n $ sudo n 7.10.0 and run: $ sudo npm install -g heroku-cli in order deploy jars, need install deploy plugin: $ sudo heroku plugins:install heroku-cli-deploy ...
Read more

java - Jtable duplicate Rows -

-
Image
when add new rows in jtable duplicate rows many times this method update jtable public final void tableaucomande(){ ((defaulttablemodel)tabcommande.getmodel()).getdatavector().clear(); session s=hibernateutil.getsessionfactory().opensession(); criteria cr1= s.createcriteria(commande.class); list <commande> lcs=cr1.list() ; criteria cr2= s.createcriteria(lignecommande.class); list <lignecommande> lck=cr2.list() ; if(lcs.size()!=0 && lck.size()!=0) { (commande lc:lcs) { for(lignecommande lig:lck){ ((defaulttablemodel)tabcommande.getmodel()).addrow(new object[]{ lc.getid_cmd(),lc.getnumcmd(),lc.getdate_cmd(),lc.getclient().getnomprenom(), lig.getproduit().getlib_prd(),lig.getquantite(),lig.getproduit().getid_prd() }); } } // tabcommande.setrowselectioninterval(tabcommande.getrowcount()-1,tabcommande.getrowcount()-1); } } this code add add data rows displaye...
Read more

validation - How to pass paramaters like unix into windows batch file -

-
i need pass various parameters .cmd file unix format file.cmd -configuration=value -source=value -flag but, try this: startlocal @echo off cls setlocal set cmdline=%* set configuration= set source= set badargs= set validation= goto main :splitargs echo splitargs(%*) if "%*" neq "" ( /f "tokens=1,2,* delims== " %%i in ("%*") call :assignkeyvalue %%i %%j & call :splitargs %%k ) goto :eof :assignkeyvalue echo assignkeyvalue(%1, %2) if /i %1==-configuration ( set configuration=%2 ) else if /i %1==-source ( set source=%2 ) else ( rem append unrecognised [key,value] badargs echo unknown key %1 set badargs=%badargs%[%1, %2] ) goto :eof :validate echo validating set validation=fail if defined configuration ( echo -configuration ok if defined source ( echo -source ok if not defined badargs ( set validation=success ) ) ) goto :eof :main cl...
Read more