Css animation is slow

I have a portfolio:

http://benliger.webatu.com/

I'm in the process of creating a mobile navigation menu and decided to use CSS in the mobile view to animate the dropdown effect. My concern here is that the menu is very "awkward" when you bring it down (the animation causes the menu to reset the page rather than fade in). It looks great when resized on a desktop browser, but I was expecting much smoother animation on mobile devices. The device im using for mobile is HTC one mini, so a fairly new phone. The way to animate it is to simply add and remove a class with a different marker. Can anyone tell me why it works so badly?

code:

$('.mobile-menu-icon').click(function () {

$(".header-options").toggleClass("mobileheaderdown");
});


.header-options {
color:white;
transition: all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
 margin-left:0px;
list-style-type:none;
font-size:18px;
margin-top: -203px;
background-color: rgba(0, 0, 0, 0.91);
width:100%;
text-align: center;
float: right;
}

.mobileheaderdown{
margin-top:2px !important;
}

      

Thanks Ben

+3


source to share


1 answer


margin-top is not an attribute that gets accelerated for mobile phones. You can make a safe effect using transform: translate which is speeding up.

edit: Example:



.header-top {
  -webkit-transform:translate(0,-203px);
  -ms-transform:translate(0,-203px);
  transform:translate(0,-203px);
}
.header-top.mobileheaderdown {
  -webkit-transform:translate(0,0);
  -ms-transform:translate(0,0);
  transform:translate(0,0);
}

      

0


source







All Articles