Animated scrolling to a place in the same webpage

I'm just beginning web design, and I've come up with this code to scroll to a place in the same page.

I don't know if this can or should be improved much longer, so I'm asking for any tips that can make this code better.

I know it's messy, but I will clean it later. I just want to know if there's a better method.



$(document).ready(function(){
$('#Tecnologia').click(function(){
$(".ConHome").css('transition','all 0.4s ease');
$(".ConHome").css('transform','translateY(-50em)');
$("#BlankSpaceMenu").css('transition','all 0.4s ease');
$('#BlankSpaceMenu').css('transform','translateY(-50em)');
$(".ConTech").css('transition','all 0.4s ease');
$(".ConTech").css('transform','translateY(-50em)');
$(".TopHeader").css('transition','all 0.4s ease');
$(".TopHeader").css('border-bottom-color','rgba(0,0,255,1)');
})})
#BlankSpaceMenu{
position:relative;
height:7em;
width:100%;
background-color:rgba(0,0,255,1);
z-index:9;
}
.Container{
position:relative;
color:rgba(255,255,255,1);
}
.TopHeader{
position:fixed;
background-color:rgba(255,153,0,1);
color:rgba(255,255,255,1);
height:7em;
width:100%;
z-index:10000;
border-bottom:rgba(0,0,0,1) dashed 10px;
}
.ConHome{
position: relative;
background-color: rgba(0,0,0,1);
color: rgba(255,255,255,1);
height: 50em;
width: 100%;
z-index:10;
}
.ConTech{
position: relative;
background-color:rgba(0,0,255,1);
color:rgba(255,255,255,1);
height: 50em;
width: 100%;
z-index:8;
}


Tecnologia

....

...



You should declare these styles into classes, and use jQuery to toggle the classes. That way, you have good "separation of concerns". You end up with a smaller base code.

Additionally, one should not use the all for transition. It's bad for performance. Ideally, one should just indicate what property to transition.

There's also this neat trick that forces CSS to be hardware-accelerated. However, you should use it carefully. I read that there's drawbacks to excessive use, and instead of performance gains, you lose performance.

With what I know, here's how you can optimize that animation code:

CSS:

#BlankSpaceMenu.transition, 
.ConHome.transition, 
.ConTech.transition,
.TopHeader.transition{
  transition : all 0.4 ease
}

#BlankSpaceMenu.transform,
.ConHome.transform,
.ConTech.transform{
  transform : translateY(-50em)
}

.TopHeader.transform{
  border-bottom-color : rgba(0,0,255,1)
}

JS:

$(function () {

  // Cache the set, assuming they don't change.
  var animationSet = $('.ConHome, #BlankSpaceMenu, .ConTech, .TopHeader');

  $('#Tecnologia').click(function () {
    animationSet.addClass('transition transform');
  });

});

StackExchange Code Review Q#38123, answer score: 4