0
I’m programming a one-page hash-browsing website using the tools available for CSS3 animation combining Transition and Transform. Using Less the code of the mixins looks something like this:
.transitionSet (@prop: all, @time: 1s, @ease: linear) {
-webkit-transition: @prop @time @ease;
-moz-transition: @prop @time @ease;
-o-transition: @prop @time @ease;
-ms-transition: @prop @time @ease;
transition: @prop @time @ease;
}
What happens is that by CSS3 I cannot animate the scroll of the page by clicking on the menu. The way is to use Jquery:
function ScrollPage(page){
var FromTop=$(page).offset().top;
$(document.body).animate({
scrollTop:FromTop
}, 1000);
}
What happens is that when the animations occur together the scrolling and the animations in CSS3 get slow, which is not much more than small effects.
I would like to know what to do so that the two animations occur smoothly and without delay.
Confused too much. I don’t understand where Less comes in this story. And you want avoid that two animations occur smooth and without delay? Why not explain better what you intend to do, maybe there are other ways and better development proposals.
– Renan Gomes
I mentioned Less by rendering the CSS on the page. Fact! I directly deleted the CSS rendered by it and the scroll of the page worked perfectly. Less would be additional information that can help anyone who tries to help me. As I said in the question, the page gets slow when the two distinct animations (CSS3 Transition and jQuery Animate) occur together. I wonder if there is some incompatibility and how to solve so that the animations occur in a perfect way.
– William Lima