Viewing CSS Transitions
CSS Transitions
|
User: JR K. 9 years ago
|
|
| How would I make it so that there would be a CSS transition when I click a link to another one of the pages on my website. | |
|
User: Jumbo T. 9 years ago
|
|
|
The question is simple. The answer is not so simple. Why not start at the beginning : http://www.google.com/search?q=css+transition+go+to+other+page Found this one : http://css-tricks.com/add-page-transitions-css-smoothstate-js/ Here's a typical demo : http://weblinc.github.io/jquery.smoothState.js/demos/typical/index.html Looking forward to see your results :) |
|
|
User: Jumbo T. 9 years ago
|
|
|
Did search and found : http://jsfiddle.net/SO_AMK/a9dnW/3/ Paste in HEAD CODE BOX of site: <style> div.container { opacity: 0; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; transition: opacity 2s ease-in; } </style> Paste in FOOTER CODE BOX of site : <script>$(".container").delay(1000).animate({"opacity": "1"}, 700);</script> Result : http://trotter.is-best.net/topage/ |
|
|
✔ Best Answer
|
|
|
User: JR K. 9 years ago
|
|
| Thank You So Much! The website address is worshipatthemountaintop.org but I haven't posted the changes yet. | |
|
User: Roddy 9 years ago
|
|
|
I tried using a fade in transition on a responsive demo site and you can see the result here... http://everwebcodebox.com/html5/text.html For simplicity, it has the classes added to the body tag… <body class="animated fadeIn"> … and the animation is added to the stylesheet. You could also add it as an inline style like this… <style type="text/css"> @-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}} @keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1}} .fadeIn {-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animation-duration:3s;animation-duration:3s} </style> I suppose it does smooth out the page load but it won't work too well on pages with images because of the way in which they load. I suppose the animation image block widget may help with this. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |